Javascript 使用formData（）上载多个文件

uph.php：

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

这是可行的，但显然只适用于

文件[0]

。如何使它为所选文件工作

---

我尝试删除

[0]

，但没有成功。

您只需使用

fileToUpload[]

而不是

fileToUpload

：

var_dump($_FILES['fileToUpload']);

---

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

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

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

//JavaScript
var ins=document.getElementById（'fileToUpload'）.files.length；
对于（var x=0；x；
}

使用javascript的方法：

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

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

:

FormData

接口的

append（）

方法将新值附加到

FormData

对象内的现有键上，如果该键不存在，则添加该键。

FormData.se

t和

append（）

之间的区别在于，如果指定的键已经存在，

FormData.set

将用新值覆盖所有现有值，而

append（）

将新值附加到现有值集的末尾。”

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

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

这很有效

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

这个对我有用

//Javascript部分
//文件输入是一个文件输入id
var formData=new formData（）；
var filesLength=document.getElementById（'file_input'）.files.length；
对于（var i=0；i，这里是这个问题的普通JavaScript解决方案-

首先，我们将使用
Array.prototype.forEach（）
方法，如下所示

document.querySelectorAll（'input[type=file]'）
返回类似数组的对象

然后我们将使用
函数.prototype.call（）
方法将类数组对象中的每个元素分配给
.forEach
方法中的
这个
值

HTML

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

您可以查看同一对象的工作示例
创建
FormData
对象

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

并附加到相同的键名

const formData: any = new FormData();

并将其发送到服务器

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

这将自动在
文件

如果您使用的是nodejs

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

我找到了这份工作

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

要上载多个包含角度形状数据的文件，请确保在component.html中有此文件


上传文件

//选定文件的数组

selectedFiles = [];

//在upload files方法中，像这样附加表单数据

                <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>

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

注意：我希望此解决方案适用于您的朋友
在附加到fd时添加
[]
，但如果您希望按文件对数据进行分组，我建议您这样做：

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

var files=document.getElementById（'inpFile'）.files
var fd=new FormData（）
for（设i=0；i

现在，您的数据将按文件分组发送，而不是按属性分组。
我的工作如下：

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（）；
对于（i=0；i这对我有效

var-ins=$（'.file'）.map（函数（）{
返回此文件；
}).get（）；
对于（var x=0；x
对我不起作用。我想这取决于您的多部分表单在服务器端的处理方式。@Phoenixonly返回一个文件
fileToUpload[]
是错误的，应该是
fileToUpload
@HoussemBadri在我的情况下
fileToUpload
不起作用。它应该是
fileToUpload[]
正如回答中所建议的那样。你的评论花了我一个小时来了解情况。
…如果你调用data.append（'file'，file）多次，你的请求将包含一系列文件…
让我绝望了好几个小时，特别是因为我觉得名称应该是
file[]
，但是只使用
文件
和多次呼叫就奏效了，谢谢！老兄，你是一个传奇人物，从早上开始一直在搜索这个，谢谢allot manI，我试过你的例子，但当我把它转储时，它总是返回集合的最后一个图像。我更改：
数据。追加（'file'，file）
到
数据。追加（'file'，I）
，这对我很有用。你正式成为我的英雄。如果你调用数据，这一行是最重要的信息。
。多次追加（'file'，file），你的请求将包含一系列文件。
非常感谢。为我节省了数小时的时间。这需要循环，并追加每个
文件[i]
在代码中添加简短的解释将获得更好的答案！只是一个有用的提示请在回答中添加更多解释文件必须附加在循环中。工作非常完美！
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)
    );
  }

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