asp.net mvc Ajax submit form with fileinput in jquery plugin - asp.net-mvc

Question

I'm having problems with an form.
I need to submit a form with ajax with fileinput in the form. In this form, I use the plugin with fileinput. This is the website
Here is my code:
<link href="~/Content/Plugin/bootstrap-fileinput-master/css/fileinput.min.css" rel="stylesheet" />
<script src="~/Content/Plugin/bootstrap-fileinput-master/js/fileinput.min.js"></script>
<script src="~/Content/Plugin/bootstrap-fileinput-master/js/fileinput_locale_zh.js"></script>
#using (Ajax.BeginForm(null, null, new AjaxOptions(){
HttpMethod = "post",Url = Url.Action("Upload", "WorkItem"),
InsertionMode = InsertionMode.Replace, LoadingElementDuration = 2000,
OnSuccess = "completed" },
new { role = "form", enctype = "multipart/form-data" }))
{
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">TITLE</span>
<input type="text" name="Descr" class="form-control" aria-describedby="basic-addon1">
</div>
<div class="m-b-5"></div>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">POINT</span>
<input type="text" name="Point" class="form-control" aria-describedby="basic-addon1">
</div>
<div class="m-b-5"></div>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">DESCR</span>
<input type="text" name="Descr" class="form-control" aria-describedby="basic-addon1">
</div>
<div class="m-b-5"></div>
<input id="file-0a" name="file" class="file" type="file" data-min-file-count="1">
<br />
<button type="submit" class="btn btn-primary">Submit</button>
<button type="reset" class="btn btn-default">Reset</button>
}
When I click the submit button, no file can be accepted. What is going wrong?

Answer 1

As #Stepher Muecke told #Ajax.BeginForm can not be used to post Files.
I dont have a idea about plugin.I use the following method:
$("#btnUploadExcel").click(function () {
if ($("#newuploadexcel").val() == '') {
notie.alert(2, "Please Select Any File", 2);
}
else {
if (window.FormData!= undefined) {
var fileUpload = $("#newuploadexcel").get(0);
var files = fileUpload.files;
// Create FormData object
var fileData = new FormData();
// Looping over all files and add it to FormData object
for (var i = 0; i < files.length; i++) {
fileData.append(files[i].name, files[i]);
}
// Adding one more key to FormData object
// fileData.append('contentId', contentId); commented as now supplierId is passed in the excel itself
$.ajax({
url: '/BulkStock/UploadExcel',
data: fileData,
type: "POST",
async: true,
dataType: 'json',
contentType: false,
processData: false,
success: function (result) {
var data = result.message;
//1=Failure, No excel
//2= Failue, with excel
//3=success, no excel
if (result.errmsg == '3') {
notie.alert(1, data, 6);
}
else if (result.errmsg == '1') {
notie.alert(3, data, 6);
}
else {
window.location = result.link;
notie.alert(3, data, 10);
}
},
error: function (response) {
console.log(response.responseText);
},
failure: function (response) {
console.log(response.responseText);
}
});
$("#newUpload").modal('hide');
} else {
notie.alert(3, "FormData is not supported.", 3);
}
}
});
And my controller to get file is:
public JsonResult UploadExcel()
{
string filePath = String.Empty;
string fileName = string.Empty;
if (Request.Files.Count > 0)
{
// Get all files from Request object
HttpFileCollectionBase files = Request.Files;
for (int i = 0; i < files.Count; i++)
{
HttpPostedFileBase file = files[i];
fileName = file.FileName;
string extension = System.IO.Path.GetExtension(fileName);
if (extension.Equals(".xls") || extension.Equals(".xlsx"))
{
var now = DateTime.Now.Ticks.ToString(CultureInfo.InvariantCulture);
string my3DigitRandomNumber = now.Substring(now.Length - 7, 3);
fileName = (file.FileName.Replace(extension, "")) + (my3DigitRandomNumber + extension);
filePath = string.Format("{0}/{1}", Server.MapPath("~/excelfiles"), fileName);
file.SaveAs(filePath);
}
}
}
}
Create a folder with the name "excelfiles" in your solution