xmlHttpRequest无法使用Chrome浏览器

Question

I have the following code for uploading file:

    var formData = new FormData();
    var file = document.getElementById("file").files[0];
    formData.append("file", file);

    var xhr = new XMLHttpRequest();
    xhr.open("POST", "UploadFileServer.axd", false);
    xhr.setRequestHeader("Content-Type", "multipart/form-data");  
    xhr.setRequestHeader("Pragma", "no-cache");
    xhr.setRequestHeader("Cache-Control", "no-cache, must-revalidate");

    xhr.addEventListener('readystatechange', function(e) {
        if (this.readyState === 4) {
            if (this.status == 200 && this.response != null) {
                var clientResponse = JSON.parse(this.response);
                if (clientResponse.Success) {
                          //alert 1
                }

                else if (!clientResponse.Success) {
                          //alert 2
                }

                else {
                    //SOME ERROR!
                }
            }
        }
    });

    xhr.send(formData);

Using IE10 everything works fine. Using Chrome, I get no files on server side:

UploadFileServer.axd:

void IHttpHandler.ProcessRequest(HttpContext ctx)
{
    OutputDebugString("Enter process req");

    HttpFileCollection uploadFile = ctx.Request.Files;
    if (uploadFile.Count > 0)
    {
         //do something

        ctx.Response.ContentType = "application/json; charset=utf-8";
        ctx.Response.Write(uploadFileResponse);
    }
}

UploadFile.Count = 0

any ideas why is it empty?

Answer 1

In some browsers the uploaded file doesn't arrive at the server in the Request.Files collection when using xmlHttpRequest, but in the body of the request.

I would suggest something like:

if (Request.Files.AllKeys.Any())
     {
        var key = Request.Files.AllKeys.First();
        fullSizeImage = new WebImage(Request.Files[key].InputStream);
      }
      else
      {
         fullSizeImage = new WebImage(Request.InputStream);
      }

Or whatever you want to do with the image :)