执行:ajax post - 使用FormData上传文件+ upload.onprogress

时间:2016-03-14 15:53:39

标签: c# jquery ajax asp.net-mvc-4 progress-bar

我正在尝试实现升级的Ajax.post

使用javascript FormData我已将文件发布到专用Controller 并成功将其保存到文件系统。

所以我有controller - “UploadFiles”标准使用Request.Files 我认为你可能会说“引擎盖下”它处理文件。

目标是:

发送/发布文件,(可能是一个一个)所以我可以估算每个文件并将ETA绘制给客户。

这是我的ajax(使用上述方法进行文件上传的标准) 到目前为止。

Log("AajaxNoPostBack preparing post-> " + targetUrl);
$.ajax({
    type: 'POST',
    url: targetUrl,
    contentType: false,//two lines for posting a file i guess
    processData: false,
    data: FormDataobj,
    success : function forsuccess(){
    },
    error : function forerr(){
    }
 });

到目前为止,它正在成功调用MVC4 controller

 [HttpPost]
 public JsonResult UploadFiles()
 {
     HttpPostedFileBase hpf = Request.Files[file] as HttpPostedFileBase;

     foreach (string file in Request.Files)
     {
         // Checking for Internet Explorer  
         if (Request.Browser.Browser.ToUpper() == "IE" || Request.Browser.Browser.ToUpper() == "INTERNETEXPLORER")
         {
             string[] testfiles = hpf.FileName.Split(new char[] { '\\' });
             name = testfiles[testfiles.Length - 1];
         }
         else
         {
             fname = hpf.FileName;
         }
     }
     fname = System.IO.Path.Combine(Server.MapPath("~/Content/uploaded"), fname);
     hpf.SaveAs(fname);  

     //the above is within try/catch
      return Json(new
      {
          Name = "TESTRespJObj",
          File = "file",
          Length = 111,
          Type = "SomeType",
          err = "noErr"
       });
 }

我已经查看并尝试了添加ajax的许多代码示例  xhr.upload.onprogress

在签名上添加另外一个属性/选项

 xhr: function () {
               var xhr = new window.XMLHttpRequest();
               xhr.upload.onprogress = updateProgress;
               xhr.addEventListener("load", transferComplete, false);
               xhr.addEventListener("error", transferFailed, false);
               xhr.addEventListener("abort", transferCanceled, false);
               xhr.open("POST", targetUrl, true);
               xhr.onreadystatechange = function () {
                   if (xhr.readyState == 4 && xhr.status == 200) {
                       alert(xhr.responseText); // handle response.
                        }
               };
    },

当然还有很多实现事件处理程序的代码,我不希望用不必要的额外100行代替这篇帖子......

正如你可以在上面思考和看到的那样,我拼命地试图混合来自几个代码样本的脚本,我对此一无所知,并且没有经验。

任何帮助都会受到欢迎

0 个答案:

没有答案