Uploading multiple files using formData()

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']);

This works, but obviously for the files[0] only. How to get this working for chosen file?

I tried removing the [0], but it didn't work.

275182 次浏览
小开

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

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

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

小开

你必须得到文件长度附加在 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/>';
}
小开

使用 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 网站文档 :

”FormData接口的 append()方法将一个新值附加到 FormData对象内的一个现有键上，或者如果该键不存在则添加该键。 FormData.set 和 append()的不同之处在于，如果指定的键已经存在，FormData.set将 覆盖所有现有的值与新的一个，而 append()将追加新的值到现有的一组值的末尾。”

我自己使用 node.js 和 multipart 处理程序中间件 multer 获得如下数据:

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

这招很管用！

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);
}
});
小开

这对我很有效:

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

这招对我很管用

//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);
}

小开

这里是这个问题的 香草 JavaScript解决方案-

首先，我们将使用 Array.prototype.forEach()方法，作为

返回一个 像数组一样的对象。

然后，我们将使用 Function.prototype.call()方法将 类似数组的对象中的每个元素分配给 .forEach方法中的 this值。

超文本标示语言

<form id="myForm">


<input type="file" name="myFile" id="myFile_1">
<input type="file" name="myFile" id="myFile_2">
<input type="file" name="myFile" id="myFile_3">


<button type="button" onclick="saveData()">Save</button>


</form>

JavaScript

 function saveData(){
var data = new FormData(document.getElementById("myForm"));
var inputs = document.querySelectorAll('input[type=file]');


Array.prototype.forEach.call(inputs[0].files, function(index){
data.append('files', index);
});
console.log(data.getAll("myFile"));
}

您可以查看同一 给你的工作示例

小开

创建一个 FormData对象

const formData: any = new FormData();

并附加到相同的 keyName

photos.forEach((_photoInfo: { localUri: string, file: File }) => {
formData.append("file", _photoInfo.file);
});

然后发送到服务器

// angular code
this.http.post(url, formData)

这将在 file下自动创建一个对象数组

如果您正在使用 nodejs

const files :File[] = req.files ? req.files.file : null;
小开

我找到了这份工作！

var fd = new FormData();
$.each($('.modal-banner [type=file]'), function(index, file) {
fd.append('item[]', $('input[type=file]')[index].files[0]);
});


$.ajax({
type: 'POST',
url: 'your/path/',
data: fd,
dataType: 'json',
contentType: false,
processData: false,
cache: false,
success: function (response) {
console.log(response);
},
error: function(err){
console.log(err);
}
}).done(function() {
// do something....
});
return false;
小开

要上传多个带有角度表单数据的文件，请确保在组件.html 中包含这些内容

上载文件

                <div class="row">




<div class="col-md-4">
&nbsp; <small class="text-center">  Driver  Photo</small>
<div class="form-group">
<input  (change)="onFileSelected($event, 'profilepic')"  type="file" class="form-control" >
</div>
</div>


<div class="col-md-4">
&nbsp; <small> Driver ID</small>
<div class="form-group">
<input  (change)="onFileSelected($event, 'id')"  type="file" class="form-control" >
</div>
</div>


<div class="col-md-4">
&nbsp; <small>Driving Permit</small>
<div class="form-group">
<input type="file"  (change)="onFileSelected($event, 'drivingpermit')" class="form-control"  />
</div>
</div>
</div>






<div class="row">
<div class="col-md-6">
&nbsp; <small>Car Registration</small>
<div class="form-group">
<div class="input-group mb-4">
<input class="form-control"
(change)="onFileSelected($event, 'carregistration')" type="file"> <br>
</div>
</div>
</div>


<div class="col-md-6">
<small id="li"> Car Insurance</small>
<div class="form-group">
<div class="input-group mb-4">
<input class="form-control" (change)="onFileSelected($event,


'insurancedocs')"   type="file">
</div>
</div>
</div>


</div>




<div style="align-items:c" class="modal-footer">
<button type="button" class="btn btn-secondary" data-
dismiss="modal">Close</button>
<button class="btn btn-primary"  (click)="uploadFiles()">Upload
Files</button>
</div>
</form>

在组件 net.ts 文件中 像这样声明数组选定的文件

selectedFiles = [];

//选定文件的数组

onFileSelected(event, type) {
this.selectedFiles.push({ type, file: event.target.files[0] });
}

//在上传文件方法中，像下面这样附加表单数据

uploadFiles() {
const formData = new FormData();


this.selectedFiles.forEach(file => {
formData.append(file.type, file.file, file.file.name);
});
formData.append("driverid", this.driverid);


this.driverService.uploadDriverDetails(formData).subscribe(
res => {
console.log(res);


},
error => console.log(error.message)
);
}

注意: 我希望这个解决方案适用于你的朋友

小开

添加 []时，附加到 fd 的工作，但如果你喜欢有你的数据按文件分组，那么我建议这样做:

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


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

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

小开

我的工作是这样的:

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

这招对我很管用

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


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

如果正在实例化已经将表单作为构造函数参数传递的 FormData 对象，则输入文件的 name 属性必须包含方括号。

HTML:

<form id="myForm" method="POST" action="url" enctype="multipart/form-data">
<input class="form-control form-control-lg" type="file" name="photos[]" multiple />

约翰逊:

var formData = new FormData(document.getElementById('myForm'));
console.log(formData.getAll('photos[]'));

这招对我管用！

小开

如果我们在 html 中有输入:

<input id="my-input" type="file" mutliple /> // multiple attribute to select and upload multiple files

我们可以从这个输入获取文件，然后用纯 js 脚本将其发送到服务器:

const myInput = document.getElementById('my-input') // getting our input


myInput.addEventListener('change', (event) => { // listening for file uploads
const files = event.target.files // getting our files after upload
const formData = new FormData() // create formData


for (const file of files) {
formData.append('files', file) // appending every file to formdata
}


const URL = 'http://server.com:3000'
const response = fetch(URL, {
method: 'POST',
data: formData // sending our formdata in body of post request
})


return response.json()
}

对我来说很有效

P.S. : 我在后端(node.js + Express)中使用了 multer，添加到文件上传路由中

upload.array("files", 10)
  • 第一个参数是文件的属性名(格式数据)
  • 第二个参数是最大文件大小
小开 
let fd = new FormData();
fd.append( "images" , image1 );
fd.append( "images" , image2 );
fd.append( "images" , image3 );

在这种格式下，您可以通过 Axios 发送多个文件。 但我对这个有点意见。 只有一个文件上传时，我尝试附加在表单数据，并尝试通过轴发送这一点。 我的问题是我从‘ Axios’导入了{ Axios } 但是没用的。 我们必须从‘ axios’中导入 axios (看拼写) 那对我来说再合适不过了

小开

这对我也有用:

var data  = new FormData();
for (const key in files)
data.append('gallery[]',files[key])

提交答案