使用formData（）上传多个文件

79 
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]，但没有成功。

javascript  arrays  upload  xmlhttprequest 
— an
source

Answers:

96

您必须获取要添加到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/>';
}
— 罗恩·桑
source
没为我工作。我想这取决于您的多部分表单将如何处理服务器端。
— fubbe
24
— 0xcaff 2016年
只返回一个文件
— Žilvinas
1
fileToUpload[]是错的，应该是fileToUpload
— Houssem Badri
69

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

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

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

router.post('/trip/save', upload.array('file', 10), function(req, res){
    // Your array of files is in req.files
}
— 弗劳德雷
source
16
...If you call data.append('file', file) multiple times your request will contain an array of your files...为我节省了数小时的绝望，尤其是因为我觉得这个名字应该是file[]，但是file多次使用just和call还是可以的，谢谢！
— bourgeois247
2
多德，您是一个传奇人物，早在早上一直在搜寻此
— 邮件，
4
我尝试了您的示例，但是当我var_dumped它时，它总是返回集合的最后一个图像。我改变：data.append('file', file)到data.append('file', i)，这为我工作。
— Jeroen Bellemans
1
而您正式是我的英雄
— WtFudgE
1
这行是最重要的信息，非常If you call data.append('file', file) multiple times your request will contain an array of your files.感谢。为我节省了数小时的时间。
— LearnToLive
7

这个为我工作

//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);
}
展开摘要

— 忍者威伯
source
3

这工作正常！

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);
    }
});
— 小姐康斯坦·皮埃尔的努力
source
在您的代码中添加简短的说明将为您提供更好的答案！只是一个有用的提示
— chevybow
2

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

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

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

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

— 仁
source
工作完美！
— 罗希·帕特
1

我为我找到了这项工作！

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;
— 小步狼
source
1
请为您的答案添加更多解释
— parisssss
1

要上传带有角形数据的多个文件，请确保在component.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>

在您的componenet.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)
    );
  }

注意：希望此解决方案对您的朋友有用

— 班尼
source
0

创建一个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;
— 苏尼尔·加格（Sunil Garg）
source
0

这是针对此问题的Vanilla JavaScript解决方案-

首先，我们将使用Array.prototype.forEach()method

document.querySelectorAll('input[type=file]')返回一个类似于object的数组。

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

的HTML

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

您可以在此处查看相同的工作示例

— 巴皮达斯
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.