您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

使用jQuery.ajax发送multipart / formdata

使用jQuery.ajax发送multipart / formdata

从Safari 5 / Firefox 4开始,最容易使用FormData该类:

var data = new FormData();
jQuery.each(jQuery('#file')[0].files, function(i, file) {
    data.append('file-'+i, file);
});

因此,现在您有了一个FormData对象,准备与XMLHttpRequest一起发送。

jQuery.ajax({
    url: 'PHP/upload.PHP',
    data: data,
    cache: false,
    contentType: false,
    processData: false,
    method: 'POST',
    type: 'POST', // For jQuery < 1.9
    success: function(data){
        alert(data);
    }
});

必须将contentType选项设置为false,强制jQuery不Content- Type为您添加标题,否则,边界字符串将丢失。另外,必须将processData标志设置为false,否则jQuery将尝试将您FormData转换为字符串,这将失败。

您现在可以使用以下方式在PHP中检索文件

$_FILES['file-0']

file-0除非您multiple文件输入中指定了属性,否则只有一个文件在这种情况下,数字将随每个文件递增。)

var opts = {
    url: 'PHP/upload.PHP',
    data: data,
    cache: false,
    contentType: false,
    processData: false,
    method: 'POST',
    type: 'POST', // For jQuery < 1.9
    success: function(data){
        alert(data);
    }
};
if(data.fake) {
    // Make sure no text encoding stuff is done by xhr
    opts.xhr = function() { var xhr = jQuery.ajaxSettings.xhr(); xhr.send = xhr.sendAsBinary; return xhr; }
    opts.contentType = "multipart/form-data; boundary="+data.boundary;
    opts.data = data.toString();
}
jQuery.ajax(opts);

除了手动迭代文件,还可以使用现有表单对象的内容来创建FormData对象:

var data = new FormData(jQuery('form')[0]);

只需将文件元素命名为相同,并在方括号中加上名称即可:

jQuery.each(jQuery('#file')[0].files, function(i, file) {
    data.append('file[]', file);
});

$_FILES['file']然后将是一个数组,其中包含每个上载文件文件上载字段。实际上,我建议在我最初的解决方案中使用此方法,因为它更容易迭代。

JS 2022/1/1 18:14:24 有383人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶