通过 Ajax 提交文件上传

Question

我正在尝试将二进制文件上传到服务器，但要避免在服务器响应时刷新整个页面。我在这类事情上经验不足，所以关于我做事的方式的一切都可能会得到纠正。

这就是我所做的。

我有HTML这样的：

<form id='form'>
    <input type='file' id='filename'></input>
    <input type='submit' onclick='doTheBusiness'></input>
</form>

我有 javascript 这样的：

function doTheBusiness () {
    var url = '/target.html?arg1=' + val1 + '&arg2=' + val2;
    var fd = new FormData ($('#filename')[0]);
    $.each (
        $.ajax ({
             'url':         url,
             'type':        'post',
             'processData': false,
             'contentType': 'multipart/form-data',
             'success':     success-routine,
             'data':        {
                 'formData': fd
             }
        });
}

在我添加 'processData': false 之前，我收到了来自 Firefox 和 Chrome 的异常，这似乎是因为 ajax 函数试图序列化我的 FormData目的。当我考虑解决这个问题时，我发现如果我没有 'contentType': 'multipart/form-data' 它将默认为 application/x-www-form-urlencoded 并且我认为这对文件内容没有任何用处。完成所有这些后，我发现如果我将它们放入 'data' 对象中，我将无法访问服务器上的 arg1 和 arg2 参数，就像我在其他方法中所做的那样地方，所以我将它们手动编码到 URL.

很遗憾，它不起作用。使用 Firefox，我现在在服务器上看不到请求。 Chrome 和 IE11 发送请求，但是当我调用 apreq_body 以查看是否可以获取上传的文件数据时，我得到了 Internal apreq error。我翻过mod_apreq代码，发现Internal apreq error对应的是APREQ_ERROR_GENERAL，但是那个错误好像就是它说的那样，一个一般的错误代码，我不喜欢尝试跟踪所有可能生成它的地方的想法。

（我已经看到 How to send FormData objects with Ajax-requests in jQuery? 指出了 'processData' 和 'contentType' 属性。）

我推测我错误地构建了请求，而 Firefox（默默地）拒绝发送它是错误的。 Chrome 和 IE11 正在发送请求，但 Apache 无法解析它。（这可能是导致我尝试访问参数时出现问题的原因，一旦我设法正确发送文件内容，我就可以将它们移回 'data' 对象。）

请帮助我更正此代码并允许我上传二进制文件而无需任何外部脚本，除了 vanilla jQuery；我怀疑即使升级到晚于 jquery.1.7.2.min.js 的版本对我的雇主来说也太过分了。

Answer 1

processData 和 contentType 需要为 false
FormData constructor 将表单作为参数而不是文件输入。
```
var fd = new FormData ($('#form')[0]);
```
将表单数据对象作为数据参数传递。
```
'data': fd,
```

通过 Ajax 提交文件上传

Submit file upload via Ajax

javascript

ajax

jquery