通过 Ajax 提交文件上传

Submit file upload via Ajax

本文关键字：文件 提交 Ajax 通过      更新时间：2023-09-26

我正在尝试将二进制文件上传到服务器，但避免在服务器响应时完全刷新页面。我对这类事情远没有经验，所以我做事方式的一切都可以纠正。

这就是我所做的。

我有这样的 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，但该错误似乎只是它所说的，一个一般的错误代码，我不喜欢尝试遵循所有可能生成它的地方的想法。

（我已经看过如何在jQuery中使用Ajax请求发送FormData对象？它指出了'processData'和'contentType'属性。

我

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

请帮助我更正此代码，并允许我上传二进制文件，除了原版jQuery之外，没有任何其他外部脚本;我怀疑即使升级到比jquery.1.7.2.min.js晚的版本对我的雇主来说也太过分了。

  • 进程数据和内容类型需要为假

  • 构造函数将窗体作为参数而不是文件输入。

    var fd = new FormData ($('#form')[0]);

  • 将表单数据对象作为数据参数传递。

    'data': fd,
相关文章：