使用 AJAX 上传多个文件答案

【问题标题】：Multiple files upload using AJAX使用 AJAX 上传多个文件
【发布时间】：2015-07-23 09:51:58
【问题描述】：

我正在开发一个 web 应用程序，我正在使用多个文件上传，但它不适用于 AJAX。对于多个文件上传，我使用运行良好的 Apache FileUpload，但在使用 Ajax 之后，ServletFileUpload.isMultipartContent() 返回 False。

感谢您的帮助

这是我的 JSP 代码：

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8" />
    <title>Envoi des fichiers RNP</title>
        <script src="js/jquery-1.11.3.min.js"></script>
        <script src="js/fileupload.js"></script>

        <link type="text/css" rel="stylesheet" href="css/form.css">
    </head>
    <body>
        <form id="myForm" >
            <fieldset>
                <legend>Envoi de fichier</legend>
                <label for="fichier">Emplacement du premier fichier <span class="requis">*</span></label>
                <input type="file" id="fichier" name="fichiers[]" multiple value="<c:out value="${fichier.nom}"/>"/>
                <span class="erreur">${form.erreurs['fichier']}</span>
                <br />
                <br />
                <input type="submit" value="Envoyer" id="showTable"/>
                <br />
            </fieldset>
        </form>
        <div id="tablediv">
            <table cellspacing="0" id="site2G">
                <tr>
                    <th scope="col">CGI</th>
                    <th scope="col">BSC</th>
                    <th scope="col">Site Name</th>
                    <th scope="col">Cells</th>
                    <th scope="col">EA</th>         
                </tr>
            </table>
        </div>      
    </body>
</html>

还有我的 AJAX 代码：

 $(document).ready(function() {$("#tablediv").hide();
 $("#myForm").submit(function(event){
     event.preventDefault();

     var formData = new FormData($(this)[0]);

     $.ajax({
            url: "Upload",
            type: 'POST',
            data: formData,
            async: false,
            cache: false,
            contentType: false,
            processData: false,
            success: function(responseJson) {
                if(responseJson!=null){
                    $("#site2G").find("tr:gt(0)").remove();
                    var table1 = $("#site2G");
                    $.each(responseJson, function(key,value) {
                         var rowNew = $("<tr><td></td><td></td><td></td><td></td><td></td></tr>");
                            rowNew.children().eq(0).text(value['bsc']);
                            rowNew.children().eq(1).text(value['sitename']);
                            rowNew.children().eq(2).text(value['cells']);
                            rowNew.children().eq(3).text(value['cgi']);
                            rowNew.children().eq(4).text(value['ea']);
                            rowNew.appendTo(table1);
                    });
                    }
                }
          });
        $("#tablediv").show();}); });

【问题讨论】：

您需要在网络选项卡中检查这些文件是否上传到那里。

标签： javascript jquery ajax jsp multiple-file-upload

【解决方案1】：

您可以更喜欢第三方插件将您的多个文件上传到服务器

我会推荐一些是

他们支持

多文件上传。

进度条

文件上传成功后要做什么

图片预览

【讨论】：

出于安全原因，您不能使用 jquery ajax 怎么会？你在哪里找到它？你不知道FormData()+jQuery.ajax() 可能吗？
@Jai 不，我不知道，我用谷歌搜索了它是可能的.. 我已经编辑了我的答案......抱歉信息有误
并且仅适用于 html5。
谢谢@Jai 所以你推荐的，下次使用插件或我自己的自定义jquery代码上传文件
@Jai 谢谢你的回答。我选择使用 JQuery 插件，它运行良好。非常感谢！

【解决方案2】：

我使用以下函数进行上传

$.upload = function(url, form, _callback) {
    $.ajax({
        url: url, 
        type: "POST", 
        processData:false,
        cache: false,
        async: true,
        data: form,
        contentType: false,
        success:function(data, textStatus, request){
            if(typeof _callback == "function")
                _callback.call(this, data);
        },
        error:function(data, textStatus, request){
            if(typeof _callback == "function")
                _callback.call(this, data);
        }
    });
};

调用这个函数

var formData = new FormData();
for(var i=0;i<$("#upload #file").get(0).files.length;i++)
   formData.append("file" + i, $("#upload #file").get(0).files[i]);


$.upload("Upload", formData, function(data){
    //success or failure check
});

你的 HTML 是

<form id="upload" style="display:none">
    <input name="file" id="file" type="file" multiple />
</form>

【讨论】：

问题不同。文件中有multiple属性。
也可以通过遍历 files[i] 并使用唯一的字段名称命名 append，例如 file1、file2、file3

【解决方案3】：

就像狄更斯提议的那样，但代码格式略有不同：

    var formData = new FormData();
    var $uploader = $("#FileUpload_doc")[0];
    for (let i = 0; i < $uploader.files.length; i++)
        formData.append("file_" + i, $uploader.files[i]);

    $.ajax({
        url: 'your url here',
        processData: false,
        contentType: false,
        data: formData,
        type: 'POST'
    }).done(function (dataReceived) {
     // do another things here
    }).fail(function (a, b, c) {
        alert(a, b, c);
    });

【讨论】：