使用Ajax.BeginForm（）异步上传文件的问题 [英] problem uploading a file using Ajax.BeginForm() asynchronously

问题描述

大家好，



我正在尝试使用Ajax.BeginForm（）上传文件，但它没有用完。



我的视图包含：

 @ using（Ajax.BeginForm（  UploadFile， null ， new  AjaxOptions { HttpMethod =   POST，UpdateTargetId =   result}， new  {enctype =   multipart / form-data}））
 {
< label id =    lblUploadNewFile  for  =   fileUploadControl>上传新文件< /  标签 >  
< input type =   file name =   fileToUpload  id =   fileUploadControl /> 
< input id =   btnFileUpload type =  提交  value  =   上传 /> 
< span id =   result /> 
} 

和相应的控制器是：

 [HttpPost] 
 < span class =code-keyword> public   string  UploadFile（FormCollection formData）
 {
 HttpPostedFileBase file = 空; 
 尝试 
 {
 file = Request.Files [ 0 ] ; 
} 
  catch  {} 
 
  if （ file！=  null && file.ContentLength >   0 ）
 {
 file.SaveAs（ string  .Concat（AppDomain.CurrentDomain.BaseDirectory，Path.GetFileName（file。文件名）））; 
  return   已成功上传; 
} 
 其他 
 {
 返回  上传失败，请再试一次。; 
} 
 
} 

现在，问题是 - 当我删除 jquery.unobtrusive-ajax.js 时，它正在上传文件，但没有异步。它做了一个完整的回发。当我在我的视图中添加 jquery.unobtrusive-ajax.js 时，它正在进行异步但不在表单数据中发送上传文件。在 Request.Files [] 中没有文件被发送到服务器。



有人请帮忙。



提前多多谢谢！

-Sunny。

解决方案

我遇到了这个小黑客，解决了Ajax.BeginForm提交没有文件的问题：

  window  .addEventListener（  submit， function （e）{
  var  form = e.target; 
  if （ form.getAttribute（  enctype）===    multipart / form-data）{
  if （form.dataset。 ajax）{
 e.preventDefault（）; 
 e.stopImmedi atePropagation（）; 
  var  xhr =  new  XMLHttpRequest（）; 
 xhr.open（form.method，form.action）; 
 xhr.onreadystatechange =  function （）{
  if （xhr.readyState = =  4 && xhr.status ==  200 ）{
  if （form.dataset.ajaxUpdate）{
  var  updateTarget = 文档 .querySelector（form.dataset.ajaxUpdate）; 
  if （updateTarget）{
 updateTarget.innerHTML = xhr.responseText; 
} 
} 
} 
}; 
 xhr.send（ new  FormData（form））; 
} 
} 
}， true ）; 

找到@ http://www.acnenomor.com/1762557p1/c-mvc3-ajaxbeginform-to-upload-file-not-working

使用HttpPostedFileBase而不是FormCollaction。

Hi All,

I'm trying to upload a file using Ajax.BeginForm() but it's not working out.

My View Contains:

@using (Ajax.BeginForm("UploadFile", null, new AjaxOptions { HttpMethod="POST", UpdateTargetId = "result" }, new { enctype = "multipart/form-data" }))
{         
  <label id="lblUploadNewFile" for="fileUploadControl">Upload New File</label>     
  <input type="file" name="fileToUpload" id="fileUploadControl"/>
  <input id="btnFileUpload" type="submit" value="Upload" />
  <span id="result" />            
}

and the corresponding Controller is:

[HttpPost]
public string UploadFile(FormCollection formData)
{
  HttpPostedFileBase file=null;
  try
  {
   file = Request.Files[0];
  }
  catch { }

  if ( file!=null && file.ContentLength > 0)
    {
     file.SaveAs(string.Concat(AppDomain.CurrentDomain.BaseDirectory, Path.GetFileName(file.FileName)));
     return "Successfully Uploaded";
    }
  else
    {
      return "Upload Failed, please try again.";
    }

  }

now, the problem is- It's uploading the file but not doing asynchronous when I remove "jquery.unobtrusive-ajax.js". It does a full postback. When I add "jquery.unobtrusive-ajax.js" it in my view, It's doing asynchronous but not sending upload file in form data. No file is being sent to the server in Request.Files[].

Somebody please help.

Thanks a lot in advance!
-Sunny.

解决方案

I came across this little hack, which resolves the problem of no files for Ajax.BeginForm submissions:

window.addEventListener("submit", function (e) {
    var form = e.target;
    if (form.getAttribute("enctype") === "multipart/form-data") {
        if (form.dataset.ajax) {
            e.preventDefault();
            e.stopImmediatePropagation();
            var xhr = new XMLHttpRequest();
            xhr.open(form.method, form.action);
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    if (form.dataset.ajaxUpdate) {
                        var updateTarget = document.querySelector(form.dataset.ajaxUpdate);
                        if (updateTarget) {
                            updateTarget.innerHTML = xhr.responseText;
                        } 
                    }
                }
            };
            xhr.send(new FormData(form));
        }
    }
}, true);

Found @ http://www.acnenomor.com/1762557p1/c-mvc3-ajaxbeginform-to-upload-file-not-working

Use HttpPostedFileBase instead of FormCollaction.

这篇关于使用Ajax.BeginForm（）异步上传文件的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！