Blueimp 文件上传：上传前从文件列表中删除文件答案

【问题标题】：Blueimp File Upload: Remove a file from file list before uploadBlueimp 文件上传：上传前从文件列表中删除文件
【发布时间】：2014-01-24 16:11:41
【问题描述】：

在提交要上传的表单之前，如何从 Blueimp 插件中的选定文件列表中删除文件。我试过 this SO answer 但它只是从 UI 中删除文件而不是从队列中。

这是我的代码

$(function(){
            $("#UploadPhotos").click(function(){
                $("#ItemPhotos").click();
            });
            $('#ItemPhotos').fileupload({
                    url: "${pageContext.servletContext.contextPath}/XYZ",
                    //dataType: 'json',
                    autoUpload: false,
                    acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
                    maxFileSize: 5000000, // 5 MB
                    // Enable image resizing, except for Android and Opera,
                    // which actually support image resizing, but fail to
                    // send Blob objects via XHR requests:
                    disableImageResize: /Android(?!.*Chrome)|Opera/
                        .test(window.navigator.userAgent),
                    previewMaxWidth: 171,
                    singleFileUploads:false,
                    previewMaxHeight: 180,
                    previewCrop: true
                }).on('fileuploadadd', function (e, data) {
                    data.context = $('<div/>').appendTo('#FilesListThumb');
                    $.each(data.files, function (index, file) {
                        var node = $('<div><h6>X</h6></div>').addClass("thumbnail-ib");
                        node.appendTo(data.context);
                        node.find("h6").click(function(){
                            node.remove();
                        });
                    });
                    $("#itemSellForm").submit(function(){
                        data.formData = $("#itemSellForm").serializeArray();
                        data.submit();
                        return false;
                    });                        
                }).on('fileuploadprocessalways', function (e, data) {
                    var index = data.index,
                        file = data.files[index],
                        node = $(data.context.children()[index]);
                    if (file.preview) {
                        node
                            .addClass("thumbnail")
                            .append(file.preview);
                    }
                    if (file.error) {
                        node
                            .addClass("thumbnail")
                            .append($('<span class="text-danger"/>').text("Upload Failed"));
                    }
                }).on('fileuploadfail', function (e, data) {
                    $.each(data.files, function (index, file) {
                        var error = $('<span class="text-danger"/>').text('File upload failed.');
                        $(data.context.children()[index])
                            .append('<br>')
                            .append(error);
                    });
                }).on("fileuploaddone",function(e,data){
                  //  sendData = false;
                 alert("done");
                });
        });

当我点击 h6 时，缩略图会从 ui 中删除，而不是从 ifles 列表中删除

【问题讨论】：

标签： jquery jquery-file-upload blueimp

【解决方案1】：

每个 BlueImp 回调都有 2 个参数：一个 event 和一个 data 对象。

data 对象包含一个files 数组，您可以对其进行编辑以更改将要上传的文件。因此，如果您在提交请求之前删除了这些数组元素之一（array.pop，或其他方法...），则可以将其视为已删除。

【讨论】：

哦，是的，它起作用了，我在node.find("h6").click 中添加了data.files.splice(index,1);
小心，我认为当你删除数组中间的一个对象时，data.files 数组的索引会重新计算。
所以我应该注意什么。如果我从 data.files 中删除一个元素，它会重新计算索引。所以我认为下次再次单击删除按钮时它会重新计算索引数组。对吗？
在我的情况下，你能告诉我如何在提交表单后从队列中删除所有文件吗？
@Manish 如果一次添加 3 个文件，然后将它们从第 1 个索引到最后一个索引删除，index 函数上的 index 值将不会更新您的 splice 函数。要检查它，只需写一个 console.log(index) 并测试它。

【解决方案2】：

也许还有助于单击按钮 UploadPhotos 的事件以删除/取消绑定。

$("#UploadPhotos").unbind("click")

【讨论】：