JS：如何使用FormData（jQuery Ajax）发送多个文件

Question

我的表单中有多个文件上传，使用 FormData 只上传了一个文件，尽管我选择了多个文件进行上传，以下是代码：

HTML

<form name="uploadImages" method="post" enctype="multipart/form-data">
<input type="file" name="photo[]" value="">
<input type="file" name="photo[]" value="">
<input type="file" name="photo[]" value="">
</form>

JS

     var ajaxData = new FormData();
     ajaxData.append( 'action','uploadImages');
     jQuery.each($("input[name^='photo']")[0].files, function(i, file) {
        ajaxData.append('photo['+i+']', file);
      });
     $.ajax({
        url: URL,
        data: ajaxData,
        cache: false,
        contentType: false,
        processData: false,
        type: 'POST',
        dataType:'json',
        success: function(data) {
            if (data.status == 'success') {
                location.reload();
            }
        }
       });

我在服务器上使用 PHP，使用 HTML 属性名称 即 photo ，只能保存文件，对于动态文件名无法工作。

- Mahesh.D

Answer 1

你的 JavaScript 出错了：你只在一个输入框中迭代文件，请看一下这个。

var ajaxData = new FormData();
ajaxData.append( 'action','uploadImages');
$.each($("input[type=file]"), function(i, obj) {
        $.each(obj.files,function(j, file){
            ajaxData.append('photo['+j+']', file);
        })
});

在jsfiddle上的例子

- Yuriy

---

它的运行很好，但问题是当我上传具有相同名称的相同文件时，会出现错误，是否有任何处理这种情况的机会。 - Mahesh.D

Yuriy，感谢你的帮助。上述描述的错误是“服务器端”错误，与“JS”无关。虽然我在描述错误：当同时选择相同的文件时，我会遇到500错误，即“内部服务器错误”。 - Mahesh.D

Yuriy，你能看一下这个链接吗？如果有什么想法，请告诉我。谢谢。 - Mahesh.D

我认为PHP喜欢使用[]，我认为MVC喜欢使用[0]。 - Nate Anderson

Answer 2

前端开发

<form name="uploadImages" method="post" enctype="multipart/form-data">
    <input type="file" name="photo[]" value=""/>
    <input type="file" name="photo[]" value=""/>
    <input type="file" name="photo[]" value=""/>
    <button id="btn">btn</button>
</form>
        <script>
            $(function(){
     var ajaxData = new FormData();
     ajaxData.append( 'action','uploadImages');
     $.each($("input[type=file]"), function(i, obj) {
        $.each(obj.files,function(j, file){
            ajaxData.append('photo['+j+']', file);
          $('#btn').on('click',function(){
        $.ajax({
        url:'https://stores-govan.c9users.io/test',
          type:"POST",
          data:ajaxData,
          processData:false,
          contentType:false,
          success:function(){
            },
          crossDomain:true
        })
        })

        })
     });

})
</script>

在后端（使用Node.js）添加以下代码（使用Multer）：

var multer=require('multer')
app.post('/test',upload.array('photo[]',6),function(req ,res,next){
            var images=[]
               if(req.files){
               for(var i=0;i<req.files.length;i++){
               images[i]=req.files[i].filename }
               }
               console.log(images)
        })

- Govan

Answer 3

<input type="file" name="Attachment[]" class="form-control TheFiles" />

之前的答案有一个小错误，在下面的代码中进行了修复，并且可以通过ajax发送多个文件：

var formData = new FormData();
        $.each($(".TheFiles"), function (i, obj) {                
            $.each(obj.files, function (j, file) {                    
                formData.append('Attachment[' + i + ']', file); // is the var i against the var j, because the i is incremental the j is ever 0
            });
        });
        formData.append('Destination', Destination); //add more variables that you need
        formData.append('ReplyTo', ReplyTo);//add more variables that you need
        formData.append('Body', Body);//add more variables that you need

可选的，仅供您查看我的Ajax配置。

$.ajax({
             url: 'YourUrl',
            type: 'POST',
            data: formData,
            async: false,
             success: function (data) {
                location.reload();
            },
            complete: function () {
                $(Here).text('Enviado com sucesso');
            },
            error: function (err) {
                alert("Não deixe nenhum campo vazio");
            },
            cache: false,
            contentType: false,
            processData: false
        }); 

- Enrique Mingyar Torrez Hinojos

Answer 4

这个很好用：

var data = new FormData();
for( var i = 0, len = document.getElementById('attachment').files.length; i < len; i++ ){
    data.append( "files" + i, document.getElementById('attachment').files[i] );
}

- Yaovi TCHUISSI

Answer 5

那些答案不起作用。

var ajaxData = new FormData();
ajaxData.append( 'action','uploadImages');
$.each($("input[type=file]"), function(i, obj) {
    $.each(obj.files,function(j,file){
        ajaxData.append('photo['+j+']', file);//i had to change "i" by "j"
    })
});

- Dalir