使用Ajax上传多个文件 [英] using ajax to upload multiple files

问题描述

我有一个简单的形式，它允许用户上传注释文本和文件服务器。当表单提交，文件上传过程中的upload.php的文件处理。它的工作原理完全正常上传只有1个文件。

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

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

HTML（的一部分）：

 ＆LT;输入类型=文件NAME ='文件[]'最大长度='1'接受=图像/ JPG格式，图像/ PNG，为image / jpeg，图像/ GIF /＆GT;
＆LT;输入类型=文件NAME ='文件[]'最大长度='1'=接受图片/ JPG格式，图像/ PNG，为image / jpeg，图像/ GIF/＆GT;
＆LT;输入类型=文件NAME ='文件[]'最大长度='1'=接受图片/ JPG格式，图像/ PNG，为image / jpeg，图像/ GIF/＆GT;
 

等等......我不知道有多少文件将被上传先进。用户有脚本，让他们上传尽可能多的他们想。

JS

  $（函数（）{
    $（文件）。在（'提交'，'形式'，功能（五）{
        即preventDefault（）;

    变量$形式= $（本）;
    。变种file_data = $ form.find（'。文件场'）丙（'文件'）[0​​];
    VAR form_data =新FORMDATA（）;
    form_data.append（行为，行为）;
    form_data.append（评论[文]，$ form.find（）VAL（）评论场。'）;
    form_data.append（评论[页面名]'，$ form.find（）VAL（）'页面名称字段。'）;

    form_data.append（'文件[]'，file_data）;



    $阿贾克斯（{
           键入：POST，
           网址：AJAX / addComment.php

           数据类型：文本，
           缓存：假的，
           的contentType：假的，
           过程数据：假的，
           异步：假的，
           数据：form_data，
           成功：函数（数据）
           {
                $（＃装载机）隐藏（）。
                $（'＃commentsBox'+ $ form.find（'REFID场。）VAL（）。）prePEND（数据）。
                 $（形式）重设（）。

           }

         }）;

    返回false;

    }）;
}）;
 

解决方案

在这里，你得到的第一个文件输入相关联的文件的内容。

  VAR file_data = $ form.find（'文件场。'）丙（'文件'）[0​​];
 

和几行后（这将更有意义，在相邻线是）你把数据表单数据对象：

  form_data.append（'文件[]'，file_data）;
 

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

I have a simple form which allows the user to upload comment text and files to the server. When the form is submitted, the file upload process is handled in 'upload.php' file. It works perfectly fine for uploading only 1 file.

I would like my script to be able upload multiple files with AJAX.

This is what I did so far -

HTML (part of it):

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

and so on...I don't know how many files will be upload in advanced. users have script that allows them to upload as many they want to.

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; 

    });
});

解决方案

Here you get the contents of the file associated with the first file input.

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

and a few lines later (these would make more sense being in adjacent lines) you put that data in the form data object:

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

Just use a for loop and replace the 0 with the loop iteration variable.

这篇关于使用Ajax上传多个文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！