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 fileKavya Shree Mandapalli
Mandlaa, if this helps please login to Mark As Answer. | Alert Moderator