使用formData()上传多个文件

Question

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

uph.php:

var_dump($_FILES['fileToUpload']);

这是有效的,但显然是files[0]唯一的.如何使这个适用于所选文件？

我尝试删除[0],但它没有用.

Answer 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/>';
}

Answer 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),您的请求将包含一个文件数组.

我自己使用node.js和multipart handler中间件multer获取如下数据:

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

Answer 3

你只需要使用fileToUpload[]而不是fileToUpload:

fd.append("fileToUpload[]", document.getElementById('fileToUpload').files[0]);

它将返回一个包含多个名称,大小等的数组......

Answer 4

这对我有用：

let formData = new FormData()
formData.append('files', file1)
formData.append('files', file2)

Answer 5

这个对我有用

//Javascript part
//file_input is a file input id
var formData = new FormData();
var filesLength=document.getElementById('file_input').files.length;
for(var i=0;i<filesLength;i++){
	formData.append("file[]", document.getElementById('file_input').files[i]);
}
$.ajax({
   url: 'upload.php',
   type: 'POST',
   data: formData,
   contentType: false,
   cache: false,
   processData: false,
   success: function (html) {
   
  }
});

<?php
//PHP part
$file_names = $_FILES["file"]["name"];
for ($i = 0; $i < count($file_names); $i++) {
   $file_name=$file_names[$i];
   $extension = end(explode(".", $file_name));
   $original_file_name = pathinfo($file_name, PATHINFO_FILENAME);
   $file_url = $original_file_name . "-" . date("YmdHis") . "." . $extension;
 move_uploaded_file($_FILES["file"]["tmp_name"][$i], $absolute_destination . $file_url);
}

Answer 6

添加[]附加到FD作品的时候，但如果您愿意让您的数据按文件进行分组，然后我会建议做这种方式：

var files= document.getElementById('inpFile').files
var fd = new FormData()

for (let i = 0; i < files.length; i++) {
  fd.append(i, files[i])
}

现在您的数据将按文件分组而不是按属性分组发送。

Answer 7

我的工作是这样的：

var images = document.getElementById('fileupload').files;
var formData = new FormData();
for(i=0; i<images.length; i++) {
     formData.append('files', images[i]);
}

Answer 8

这很好用！

var fd = new FormData();

$('input[type="file"]').on('change', function (e) {
    [].forEach.call(this.files, function (file) {
        fd.append('filename[]', file);
    });
});

$.ajax({
    url: '/url/to/post/on',
    method: 'post',
    data: fd,
    contentType: false,
    processData: false,
    success: function (response) {
        console.log(response)
    },
    error: function (err) {
        console.log(err);
    }
});

Answer 9

这对我有用

var ins = $('.file').map(function () {
    return this.files;
}).get();

for (var x = 0; x < ins; x++) {
    formData.append("file", ins[x][0]);
}