File upload control - click and load immediately display in Image control

Posted by Mandlaa under ASP.NET on 5/2/2013 | Points: 10 | Views : 11594 | Status : [Member] | Replies : 3
I need to display the selected image as soon as i select a file from file upload control.

The file upload control does not have a clicked event nor it can display the selected file path.
I mean the textbox gets hided anyway.

The scenario is ,
Page loaded. user ready for image selection.
once the file is selected immediately the image should get displayed in the image control.
No extra button or control to display the image in image control.


immediate responses will be greatful...




Responses

Posted by: Kmandapalli on: 5/2/2013 [Member] Silver | Points: 25

Up
0
Down
Hi,

Step 1:

Right on models folder and add a new class and name it (UploadImage).
Declare a property in this class.
public class UploadImage
{
[Display(Name = "Local File")]
public HttpPostedFileBase File { get; set; }
}

Step 2:

Right click on controllers folder and add a new controller and name it (Home).
In the ActionMethod write the following code:

public ActionMethod UploadImage()
{
return View();
}

add view to the actionMethod, click on strongly typed and select model class (ApplicationName.Models.UploadImage)
and click on add.

Step 3:

Add the following scripts to the view from the scripts folder.
@section Scripts
{
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.imgareaselect.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.fancyupload.js")"></script> (You can download this script from the zip file i have provided)
<script>
$(document).ready(function () {
initSelect();
});
</script>
}

<div id="upload-choices">

<div class="editor-row">
<div class="editor-field">
@Html.FileFor(model => model.File)
@Html.ValidationMessageFor(model => model.File)
</div>
</div>
<div class="editor-row">
@Html.ValidationSummary(true)
</div>
</div>
<div id="upload-cut">
<img alt="Field for image cutting" id="preview" src="@Url.Content("~/Content/empty.png")" />
</div>

Step 4:

Run the application.
Click on Choose a file, select a picture or image.
Once you select the image it gets displayed.

Mark as answer if you are satisfied....

Regards,
Shree M.
 Download source file

Kavya Shree Mandapalli

Mandlaa, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: aswinialuri-19361 on: 5/2/2013 [Member] Starter | Points: 25

Up
0
Down
Hi try this
Ithink its useful to you
if (FileUpload1.HasFile)
{
if (FileUpload1.PostedFile.ContentType == "image/jpeg" || FileUpload1.PostedFile.ContentType == "image/gif" || FileUpload1.PostedFile.ContentType == "image/x-png" && FileUpload1.PostedFile.ContentLength == 1024)
{
string path = "~/Images/" + FileUpload1.FileName;
FileUpload1.SaveAs(Server.MapPath(path));


Image3.ImageUrl = "~/Images/" + FileUpload1.FileName;
Image3.Visible = true;
Thanks&Regards

Mark as Answer if it helps you
Thanks&Regards
Aswini Aluri

Mandlaa, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Appanrajmca on: 5/3/2013 [Member] Starter | Points: 25

Up
0
Down
Please u refer this .. This can help to u 100% !!! and reply u r comments to me!!!!
 Download source file

Mandlaa, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response