Удалять файлы программно с помощью jquery fileupload basic

Ответ 1

Я решил это. Вот решение с описанием:

Я нашел свое решение после того, как потрудился с ним еще немного. Ключ помнил, что я был в обратном направлении. Поэтому в обработчике событий для функции удаления я просто обнулял массив data.files, и в submit для этого обработчика я отправляю только, если массив файлов имеет длину больше 0. Я очистил функцию обработчика событий, поэтому это проще на глазах. HTML не изменяется.

Новый код обработки JavaScript:

 $('#myForm').fileupload({
            url: "/SomeUrl",
            dataType: 'html',            
            add: function (e, data) {
                $.each(data.files, function (index, file) {
                    var newFileDiv = $("<div class='uploadBox' id='fileDiv_" + file.name + "'><div class='leftEle'><a href='#' id='link_" + index + "' class='removeFile'>Remove</a></div><div class='midEle'>" + file.name + "</div></div>");
                    $('#uploadFilesBox').append(newFileDiv);

                    newFileDiv.find('a').on('click', { filename: file.name, files: data.files }, function (event) {                        
                        event.preventDefault();
                        var uploadFilesBox = $("#uploadFilesBox");
                        var remDiv = $(document.getElementById("fileDiv_" + event.data.filename));
                        remDiv.remove();                        
                        data.files.length = 0;    //zero out the files array                                     
                    });

                    data.context = newFileDiv;
                });

                $('#myButton')
                    .click(function () {
                        if (data.files.length > 0) {     //only submit if we have something to upload
                            data.submit();
                        }                                                    
                    });
            }
});

Ответ 2

Спасибо за это @Furynation.

То, что я сделал, было похоже на ваш подход. Для каждого выбранного файла я добавляю строку в таблицу (предварительная загрузка). Эта строка, которую я назначаю для использования data.context для последующего использования.

См: https://github.com/blueimp/jQuery-File-Upload/issues/3083

Мой фрагмент кода находится в обработчике обратного вызова add:

 $("#upload").click(function () {
                 if (data.files.length > 0) { 
                     data.submit();
                 }
            });
            data.context.find('a').on('click',function (event) {  
                event.preventDefault();
                data.context.remove();   
                data.files.length = 0;   
            });

Это удаляет строку таблицы и сбрасывает массив.

Если есть более чистый способ, сообщите мне.

Ответ 3

Работает для меня для нескольких файлов - он проверяет все файлы и не прерывается, когда файл с ошибкой находится в середине всех файлов (например, .splice() или .lenght=0 do). Идея: выполните проверку → , если ошибка: отметьте индекс файла с ошибкой → после всех файлов/перед загрузкой: удалите/удалите неправильные индексы/файлы $.grep() → загружать хорошие файлы вместе singleFileUploads: false.

$(this).fileupload({
        // ...
        singleFileUploads: false,   // << send all together, not single
        // ...
        add: function (e, data) {

            // array with all indexes of files with errors
            var error_uploads_indexes = [];

            // when add file - each file
            $.each(data.files, function(index, file) {

                // array for all errors - in example is only one: size
                var uploadErrors = [];

                // ... validation

                        // check size
                        if(data.files[index]['size'] > 1048576) {
                            uploadErrors.push('Filesize is too big');
                        };
                // ...

                // when errors
                if(uploadErrors.length > 0) {

                    // mark index of error file
                    error_uploads_indexes.push(index);
                    // alert error
                    alert(uploadErrors.join("\n"));

                };

            }); // << each


            // remove indexes (files) with error
            data.files = $.grep( data.files, function( n, i ) {
                return $.inArray(i, error_uploads_indexes) ==-1;
            });


            // if are files to upload
            if(data.files.length){
                // upload by ajax
                var jqXHR = data.submit().done(function (result, textStatus, jqXHR) {
                        //...
                     alert('done!') ;
                        // ...
                });
            } // 

        },
        // ...
    }); // << file_upload