通过ajax上传文件不会在MVC中的Request中追加文件

我有一个简单的表单，其中包含类型文件的输入，只接受图像。 我只想将文件保存在表格和服务器中。

下面是我的cshtml

@using (Html.BeginForm("UploadSlider", "Admin", FormMethod.Post, new { id = "frmUploadSliderImage", @class = "form-admin" })) { 
upload images
 
  Browse    No files selected   UPLOAD 
 } 

这是我的js ajax部分

 function ValidateSliderImageandPost(form, ctrl) { $("#" + form).on("submit", function (e) { e.preventDefault(); var formContainer = $('#' + form + ' .text-danger'); var formdata = new FormData(); var fileInput = $('#sliderFile'); if ($(fileInput).get(0).files.length == 0) { $('.btn-file :file').parent().siblings().filter(".text-danger").html('Please select a file!'); } if ($(formContainer).text().length == 0) { run_waitMe('Uploading! Please wait...', 'stretch', '.container'); $.each($(fileInput).get(0).files, function (index,value) { formdata.append($(this).attr('name'), $(this)); }); postData('UploadSlider', formdata, '.upslider .status'); if (msg) { $(".container").find('#cont').waitMe('hide'); $("#" + form).find('input[type=text], textarea').val('').removeClass("alert-success"); } else { $(".container").find('#cont').waitMe('hide'); $("#" + form).find('input[type=text], textarea').removeClass("alert-success"); } } $("#" + form).unbind('submit'); return false; }); } function postData(url,data,target) { $.ajax({ url: url, type: "POST", dataType: 'json', data: data, processData: false, contentType:false, success: function (data) { if (data.result) { animateStatus("success", data.message, target); msg = true; } else { animateStatus("fail", data.message, target); msg = false; } }, error: function (data) { animateStatus("fail", data.message, target); msg = false; } }); } 

这是我的控制器部分

 [HttpPost] public JsonResult UploadSlider() { bool valid = false; bool val = false; if (Request.Files.Count > 0) { valid = true; } else { return Json(new { result = false, message = "Something went wrong! Please try again!" }); } if (valid) { List fil = new List(); foreach (HttpPostedFileBase f in Request.Files) { HttpPostedFileBase file = f; //Uploaded file string fileName = file.FileName; fil.Add("./Images/Galllery/" + fileName); System.IO.Stream fileContent = file.InputStream; file.SaveAs(Server.MapPath("~/Images/Gallery/") + fileName); } using (var context = new MCBConnectionString()) { foreach (string path in fil) { tbl_slider slider = new tbl_slider(); slider.slurl = path; slider.slalt = ""; context.tbl_slider.Add(slider); context.SaveChanges(); val = true; } } if (val) { return Json(new { result = true, message = "Uploaded video successfully." }); } else { return Json(new { result = false, message = "Could not upload video. Please try again!" }); } } return Json(new { result = false, message = "Could not upload video. Please try again!" }); } 

当我调试并检查Request.Files.Count时，它将始终为零。 是否有任何替代解决方法或我在发布文件时遇到任何错误。 我已按照此链接进行了更改，并根据我的需要进行了更改。

Answer 1

代替：

 $.each($(fileInput).get(0).files, function (index, value) { formdata.append($(this).attr('name'), $(this)); }); 

你可能会用：

 $.each($(fileInput).get(0).files, function (index, value) { formdata.append(value.name, value); }); 

主要区别在于，使用您的方法，Content-Disposition部分不包含filename ，因此ASP.NET不会将其识别为文件内容：

 ------WebKitFormBoundaryZxwCwBC0O8Q3hOAO Content-Disposition: form-data; name="foo.png" [object Object] ------WebKitFormBoundaryZxwCwBC0O8Q3hOAO Content-Disposition: form-data; name="bar.png" [object Object] ------WebKitFormBoundaryZxwCwBC0O8Q3hOAO-- 

根据我的方法，请求将如下所示：

 ------WebKitFormBoundary1ERBVX0wzdVczcR0 Content-Disposition: form-data; name="foo.png"; filename="foo.png" Content-Type: imag/png [object Object] ------WebKitFormBoundary1ERBVX0wzdVczcR0 Content-Disposition: form-data; name="bar.png"; filename="bar.png" Content-Type: image/png [object Object] ------WebKitFormBoundary1ERBVX0wzdVczcR0-- 

现在你可以看到实际的差异了。 在第一种情况下，您没有filename也没有filename Content-Type ，ASP.NET只是将这些元素视为标准表单发布数据而不是文件。

而不是使用实际文件名作为name您可以考虑将其替换为一些通用名称：

 $.each($(fileInput).get(0).files, function (index, value) { formdata.append('sliderFiles', value); }); 

现在，您可以通过使用List参数而不是使用Request.Files来进一步改进控制器操作：

 [HttpPost] public ActionResult UploadSlider(List sliderFiles) { ... } 

关于您的代码的另一个注意事项是HTML5 FormData在订单浏览器中不可用，您的代码将无声地失败。 如果您需要支持旧浏览器，则可能需要通过测试浏览器的function来执行渐进增强，如果浏览器不支持FormData，则可以回退到标准表单POST：

 $("#" + form).on("submit", function (e) { if(window.FormData === undefined) { // The browser doesn't support uploading files with AJAX // falling back to standard form upload } else { // The browser supports uploading files with AJAX => // we prevent the default form POST and use AJAX instead e.preventDefault(); ... } });