jquery多文件上传问题答案

【问题标题】：Jquery multiple file upload issuejquery多文件上传问题
【发布时间】：2016-10-07 04:48:46
【问题描述】：

我正在使用 Jquery File Upload 插件来上传文件，这是从服务器获取文件并生成 HTML 并插入到元素中的方法：

 getFilesToHolders:function (id,tablesName) {
            //attachecedFiles is a container for the generated html
            var attachedFiles = $('#IDAttachedfiles');
            // clears this area in case of multiple file upload
            attachedFiles.html('');
            attachments.getFiles(id,tablesName,function(data) {
            // getFiles just does an ajax request
                var template = '<li class="list-group-item"><b>File:</b> <span class="filenameClassAtt"></span> | <b>Extension:</b> <span class="label label-warning extensionAttachedFile"></span> <a href="" class="pull-right attachment-remove-class" style="padding-left:10px; color:#e74c3c;"><i class="fa fa-remove "></i></a>  <a class="pull-right download-attachment-class"  href=""><i class="fa fa-download"></i></a></li>';
                if (!data.length) {
                    attachedFiles.html('<h2>No files</h2>');
                    return;
                }
                $.each(data, function(index, val) {
                     var newTemp = $(template);
                     newTemp.find('.filenameClassAtt').html(val.url);
                     newTemp.find('.extensionAttachedFile').html(val.extension);
                     newTemp.find('.download-attachment-class').attr({
                        'id': 'IDAttachmentDownload-'+val.id,
                        'data-tabel-name': val.table_name,
                        'data-record-id' :val.record_id
                     });;
                     newTemp.find('.attachment-remove-class').attr({
                        'id': 'IDAttachmentDelete-'+val.id,
                        'data-tabel-name': val.table_name,
                        'data-record-id' :val.record_id
                     });
                     attachedFiles.append(newTemp);
                });
            });
        },

这是在文件上传后执行的方法：

done: function (e, data) {
            var data = data.result;
            if (data.success == 1) { 
               attachments.getFilesToHolders(data.record_id,data.table_name);
               swal(data.data,false,'success');
            }else{

               app.helper.displayErrors(data);
            }

        },

而这个方法利用上述方法在上传后加载页面上的文件，所以这里的问题是当我上传多个文件时，done方法执行了多次，并且由于某种原因列表上传后生成的文件乘以我上传的文件数量，即使 getFilesToHolders 方法每次调用时都会清除 div attachedFiles.html(''); 所以我不知道为什么列表是重复的，这里是截图：@987654321 @

这里我只上传了 4 个文件，但页面上有 16 个，从服务器端是可以的，当我上传后获取文件时，它也可以正常工作，显示 4 个文件中的 4 个

【问题讨论】：

标签： javascript jquery file-upload

【解决方案1】：

问题在于异步性，done 函数是异步触发的，所以我的 getFile 函数在 "queue" 中，修复只是将 attachedFiles.html(''); 放在 getFile 函数中，所以它会删除所有内容并重新开始，填充div;

【讨论】：