如何使用XMLHttpRequest和formdata将文件发送到服务器

Question

我查看了一些articals，似乎无法使用XMLHttpRequest和FormData对象成功将文件发送到服务器。

当我在upload.aspx文件的pageload中调试c＃.net代码时，请求对象的files属性的计数总是为0。

我错过了什么部分，以便我可以异步地将文件发送到服务器？

- HTML

<input type="file" id="upload" accept="image/*" onchange="handleFile(this.files)" name="file" />

- js的

function handleFile(files) {

    var fileReader = new FileReader();
    var file = files[0];
    var imageElem = document.createElement("img");
    debugger
    fileReader.onload = (function (img) { return function (e) { img.src = e.target.result; }; })(imageElem);

    fileReader.readAsDataURL(file);

    document.getElementById("images").appendChild(imageElem);

    uploadFile(file);
}

function uploadFile(file) {
    debugger
    var formData = new FormData();
    formData.append("file", file);
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "/upload.aspx", true);
    xhr.setRequestHeader("Content-Type", "multipart/form-data");
    xhr.setRequestHeader("X-File-Name", file.name);
    xhr.setRequestHeader("X-File-Size", file.size);
    xhr.setRequestHeader("X-File-Type", file.type);
    xhr.send(formData);
}

- C＃

protected void Page_Load(object sender, EventArgs e)
{
    HttpPostedFile file = null;
    if (Request.Files.Count > 0)
    {
        file = Request.Files[0];
        //file.SaveAs(Server.MapPath("~/myfile.txt"));
    }
}

- 快照

---

--------------------在这里找到答案-------------------- ---------------

File API File Upload - Read XMLHttpRequest in ASP.NET MVC

Answer 1

您只需删除此代码行：

xhr.setRequestHeader("Content-Type", "multipart/form-data");

希望它有所帮助！