Блог

Я использую плагин загрузки файлов Jquery для загрузки файлов, вот метод, который получает файлы с сервера, генерирует 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(''); , поэтому я не знаю, почему список дублируется, вот sceenshot :

здесь я загрузил только 4 файла, но получил 16 на странице, со стороны сервера все в порядке, также, когда я получаю файлы после загрузки, он также работает нормально, показывает 4 из 4

Проблема была в асинхронности, done функция запускалась асинхронно, поэтому моя функция GetFile находилась в «очереди», исправление состояло в том, чтобы просто поместить attachedFiles.html(''); внутри функции GetFile, чтобы она все стерла и начала заново, заполнив div;