Question

我有一个简单的表单，允许用户将注释文本和文件上传到服务器。提交表单后，文件上传过程将在＆＃39; upload.php＆＃39;中处理。文件。它仅适用于上传1个文件。

我希望我的脚本能够使用AJAX上传多个文件。

这是我到目前为止所做的 -

HTML（部分内容）：

<input type='file' name='file[]' maxlength='1' accept="image/jpg,image/png,image/jpeg,image/gif" />
<input type='file' name='file[]' maxlength='1' accept="image/jpg,image/png,image/jpeg,image/gif" />
<input type='file' name='file[]' maxlength='1' accept="image/jpg,image/png,image/jpeg,image/gif" />

依此类推......我不知道有多少文件会在高级版中上传。用户拥有允许他们上传任意数量的脚本。

JS

$(function() {
    $(document).on('submit','form',function(e) {
        e.preventDefault(); 

    var $form = $(this);
    var file_data = $form.find('.file-field').prop('files')[0];   
    var form_data = new FormData();       
    form_data.append('act', act);
    form_data.append('comment[text]',  $form.find('.comment-field').val());   
    form_data.append('comment[pageName]',  $form.find('.pagename-field').val());   

    form_data.append('file[]', file_data);



    $.ajax({
           type: "POST",
           url: "ajax/addComment.php",

           dataType: 'text',  
           cache: false,
           contentType: false,
           processData: false,  
           async: false,
           data: form_data,
           success: function(data)
           {
                $("#loader").hide();
                $('#commentsBox'+$form.find('.refid-field').val()).prepend(data);
                 $("form").reset(); 

           }

         });

    return false; 

    });
});

Answer 1

在这里，您可以获得与第一个文件输入相关联的文件的内容。

var file_data = $form.find('.file-field').prop('files')[0];

以后几行（这些在相邻行中会更有意义）将这些数据放在表单数据对象中：

form_data.append('file[]', file_data);

只需使用for循环并将0替换为循环迭代变量。

使用ajax上传多个文件

1 个答案: