通过Ajax提交文件上传

时间:2015-01-16 12:42:29

标签: javascript jquery ajax

我尝试将二进制文件上传到服务器,但在服务器响应时避免完整的页面刷新。我对此类事情的经验远非如此,所以关于我这样做的一切都需要纠正。

这就是我所做的。

我有这样的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而我并不认为这会对文件内容有任何用处。完成所有这些操作后,我发现如果我将它们放入arg1对象中,我就无法访问服务器上的arg2'data'参数已在其他地方完成,所以我将它们手工编码到URL中。

不幸的是它没有用。使用Firefox,我现在无法在服务器上看到请求。 Chrome和IE11发送了一个请求,但是当我拨打Internal apreq error以查看是否可以访问上传的文件数据时,我收到apreq_body。我已经浏览了mod_apreq代码,发现Internal apreq error对应APREQ_ERROR_GENERAL,但该错误似乎正如它所说的那样,一般错误代码而且我没有#&# 39;想要尝试跟踪可能产生的所有可能的地方。

(我已经看到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之后的版本对我的雇主来说也是一个太过分了。

1 个答案:

答案 0 :(得分:0)

  • processData和contentType必须为false
  • FormData constructor将表单作为参数而不是文件输入。

    var fd = new FormData ($('#form')[0]);
    
  • 将表单数据对象作为数据参数传递。

    'data': fd,