javascript - 文件直到处理程序的方法才到达

Question

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

$(document).ready(function () {
            $("#Button1").click(function (evt) {
                var fileUpload = $('[id$=FileUpload1]')[0].value.split(",");

                      var data = new FormData();
                     for (var i = 0; i < fileUpload.length; i++) {
                          data.append(fileUpload[i].name, fileUpload[i]);
                        }

    var options = {};
    options.url = "Handler.ashx";
    options.type = "POST";
    options.data = data;
    options.contentType = false;
    options.processData = false;
    options.success = function (result) { alert(result); };
    options.error = function (err) { alert(err.statusText); };

   $.ajax(options);

   evt.preventDefault();
  });
});

这是我的 jquery，下面是我的处理程序文件代码......

直到最后，我在调试时获得了值(value)，但在一次上传多张图片的座右铭中，我无法在句柄中获得任何值(value)

处理程序代码

public void ProcessRequest (HttpContext context) {

        string filePath = "FileSave//";

        foreach (string file in context.Request.Files)
        {
            HttpPostedFile filed = context.Request.Files[file];
            filed.SaveAs(context.Server.MapPath(filePath  + filed.FileName));
            context.Response.Write("File uploaded");
        }
  }

Answer 1

如果你愿意，你可以尝试这种方式。

$(document).ready(function () {
     $("#Button1").click(function (evt) {
          evt.preventDefault();
          var formdata = new FormData();
          var fileInput = $('#sliderFile'); //#sliderFile is the id of your file upload control
          if ($(fileInput).get(0).files.length == 0)
          { //show error
               return false;
          }
          else
          {
              $.each($(fileInput).get(0).files, function (index,value) {
                   formdata.append(value.name, value);
              });
              $.ajax({
                    url: 'Handler.ashx',
                    type: "POST",
                    dataType: 'json',
                    data: data,
                    processData: false,
                    contentType:false,
                    success: function (data) {
                            if (data.result) {
                                 //return true or any thing you want to do here
                            }
                            else {
                                 //return false and display error
                            }
                    },
                    error: function (data) {
                          //return false and display error
                    }
              });
          }
     });//button click close
 });//document.ready close

尝试一下然后告诉我

编辑:请记住，HTML5 FormData 在旧版浏览器中不可用，您的代码将默默地失败。如果您需要支持较旧的浏览器，您可能需要通过测试浏览器的功能来执行渐进式增强，如果浏览器不支持 FormData，则回退到标准表单 POST:

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();

        ...
}

有关这方面的更多信息，您可以查看我已接受的其中一个问题的答案。很清楚那里的问题是什么。 Here is the link

编辑:只需添加这些 LINK1和 LINK2对于那些前来寻找答案的人。