How to upload a Image in Asp.net MVC using Ajax request I have single controller and its view file have to use Ajax request.
Index Controller
public ActionResult Index()
{
return View();
}
and its view
We can send the file to the server using the JQuery Ajax method. And we also preview image file before uploading on the server.
Go to File->New->Project. Give a suitable name to the Application. Click OK. As you can see in the above image, two files are sent to C# ActionMethod, and both will be uploaded now.
Textbox with id="imageUploadForm"
<input type="file" id="imageUploadForm" name="image" multiple="multiple" />
Ajax function
$(document).ready(function() {
$("#imageUploadForm").change(function() {
var formData = new FormData();
var totalFiles = document.getElementById("imageUploadForm").files.length;
for (var i = 0; i < totalFiles; i++) {
var file = document.getElementById("imageUploadForm").files[i];
formData.append("imageUploadForm", file);
}
$.ajax({
type: "POST",
url: '/Home/Upload',
data: formData,
dataType: 'json',
contentType: false,
processData: false
//success: function(response) {
// alert('succes!!');
//},
//error: function(error) {
// alert("errror");
//}
}).done(function() {
alert('success');
}.fail(function( xhr, status, errorThrown ) {
alert('fail');
};
});
});
Controller Function
[HttpPost]
public void Upload()
{
if(Request.Files.Count != 0){
for (int i = 0; i < Request.Files.Count; i++)
{
var file = Request.Files[i];
var fileName = Path.GetFileName(file.FileName);
var path = Path.Combine(Server.MapPath("~/App_Data/"), fileName);
file.SaveAs(path);
}
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With