使用 formData（）上传多个文件

javascript arrays xmlhttprequest upload

2022-08-30 05:01:26

var fd = new FormData();
fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);
var xhr = new XMLHttpRequest();
xhr.open("POST", "uph.php");
xhr.send(fd);

哎呀.php：

var_dump($_FILES['fileToUpload']);

这有效，但显然是唯一的。如何让它适用于所选文件？files[0]

我尝试删除，但它不起作用。[0]

答案 1

您必须获取要在JS中追加的文件长度，然后通过AJAX请求发送，如下所示

//JavaScript 
var ins = document.getElementById('fileToUpload').files.length;
for (var x = 0; x < ins; x++) {
    fd.append("fileToUpload[]", document.getElementById('fileToUpload').files[x]);
}

//PHP
$count = count($_FILES['fileToUpload']['name']);
for ($i = 0; $i < $count; $i++) {
    echo 'Name: '.$_FILES['fileToUpload']['name'][$i].'<br/>';
}

答案 2

使用javascript的方式：

var data = new FormData();

$.each($("input[type='file']")[0].files, function(i, file) {
    data.append('file', file);
});

$.ajax({
    type: 'POST',
    url: '/your/url',
    cache: false,
    contentType: false,
    processData: false,
    data : data,
    success: function(result){
        console.log(result);
    },
    error: function(err){
        console.log(err);
    }
})

如果您多次调用 data.append（'file'， file），您的请求将包含一个文件数组。

来自 MDN 网络文档：

“接口的方法将新值追加到对象内的现有键上，或者如果该键尚不存在，则添加该键。t 和之间的区别在于，如果指定的键已经存在，则将使用新值覆盖所有现有值，而会将新值追加到现有值集的末尾。append()FormDataFormDataFormData.seappend()FormData.setappend()

我自己使用node.js和多部分处理程序中间件multiter获取数据如下：

router.post('/trip/save', upload.array('file', 10), function(req, res){
    // Your array of files is in req.files
}

使用 formData（） 上传多个文件

使用 formData（）上传多个文件