I would like to upload a file in my page using:
<input type="file" name="FileName">
I have a button, clicking on which an ajax post is done.
$.ajax({
cache: false,
async: true,
type: "POST",
url: '@Url.Content("~/OCR/OCRProcessor")',
data: '',
success: function (data) {
$('#ocrresult').val(data);
}
});
I would like to get the file uploaded in the controller action method something like below:
HttpPostedFileBase hpf = Request.Files["FileName"] as HttpPostedFileBase
Please let me know the optimal way to achieve this task.
jquery Forms plugin (GitHub Link)would be an ideal choice in this context. You can simply do it like this. (Include the file input in this form)
$('#myFormId').submit(function() {
// submit the form
$(this).ajaxSubmit();
// return false to prevent normal browser submit and page navigation
return false;
});
Demo
This would be a No plugin approach (only in Html5), but I'm still recommending the plugin
$("#myFormId").submit(function(){
var formData = new FormData($(this)[0]);
$.ajax({
url: "YourPath/ToAction",
type: 'POST',
data: formData,
async: false,
success: function (data) {
alert(data)
},
cache: false,
contentType: false,
processData: false
});
return false;
});
Another nice plugin.
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