Dropzone.js 删除在页面加载时创建的模拟文件时，默认显示添加文件消息

Question

这里有一个以前未回答的问题，但没有提供代码或答案。我希望提供一些代码，您将能够帮助我。

Removing any existing file from Dropzone shows dictDefaultMessage

当我加载页面时，我将模拟文件添加到拖放区。当我在其中一个文件上单击删除时，即使仍然存在文件，默认的添加图像文本也会显示在拖放区中。 dropzone 如何跟踪拖放区中的文件数。我试过直接修改 myDropzone.files.length 属性以匹配模拟文件的数量，但它打破了 dropzone 正如我在另一个问题中所说的那样。这是我的 dropzone 代码。

var jsphotos = '@jsphotos';

var mockFiles = [];


Dropzone.autoDiscover = false;
var fileList = new Array;
var fileListCounter = 0;


var photoDropzone = new Dropzone('#photoDropzone', {
    url: 'importphotos.cshtml',
    paramName: "file", // The name that will be used to transfer the file
    maxFilesize: 5, // MB
    method: 'post',
    acceptedFiles: 'image/jpeg,image/pjpeg',
    dictInvalidFileType: 'Files uploaded must be type .jpg or .jpeg',

    init: function () {
        this.on("addedfile", function (file) {

            // remove size
            file.previewElement.querySelector('.dz-size').innerHTML = '';

             // add custom button
             // Create the remove button
             var removeButton = Dropzone.createElement('<i class="fa fa-times-circle-o fa-3x removeButton"></i>');

             // Capture the Dropzone instance as closure.
             var _this = this;

             // Listen to the click event
             removeButton.addEventListener("click", function (e) {
                 // Make sure the button click doesn't submit the form:
                 e.preventDefault();
                 e.stopPropagation();

                 // Remove the file preview.
                 _this.removeFile(file);

            });

            // Add the button to the file preview element.

            file.previewElement.appendChild(removeButton);
        });

        this.on("success", function (file, serverFileName) {
            file.previewElement.querySelector('.dz-filename').innerHTML = '<span data-dz-name>'+serverFileName+'</span>';
        });


        this.on("removedfile", function (file) {

            //var rmvFile = "";
            //for (f = 0; f < fileList.length; f++) {

            //    if (fileList[f].fileName == file.name) {
            //        rmvFile = fileList[f].serverFileName;
            //        fileListCounter--;
            //    }

            //}

            //if (rmvFile) {
            //    $.ajax({
            //        url: "deletephoto.cshtml",
            //        type: "POST",
            //        data: { "fileList": rmvFile }
            //    });
            //}
        });

    }


});


$('#photoDropzone').sortable({
    items: '.dz-preview',
    cursor: 'move',
    opacity: 0.5,
    containment: "parent",
    distance: 10,
    tolerance: 'pointer',
    sort: function (event, ui) {
        var $target = $(event.target);
        if (!/html|body/i.test($target.offsetParent()[0].tagName)) {
            var top = event.pageY - $target.offsetParent().offset().top - (ui.helper.outerHeight(true) / 2);
                ui.helper.css({ 'top': top + 'px' });
        }
    },
    update: function (e, ui) {
        // do what you want
    }
});


if (jsphotos.length > 0) {
    var tmpSplit = jsphotos.split(',');

    for (i = 0; i < tmpSplit.length; i++) {
        if (tmpSplit[i].length > 0) {
            mockFiles.push(tmpSplit[i]);
        }
    }
}

for (i = 0; i < mockFiles.length; i++) {
    // Create the mock file:
    var mockFile = { name: mockFiles[i]};

    // Call the default addedfile event handler
    photoDropzone.emit("addedfile", mockFile);
    photoDropzone.emit("success", mockFile, mockFile.name);

    // And optionally show the thumbnail of the file:
    //photoDropzone.emit("thumbnail", mockFile, '@Globals.tempUploadFolderURL'  + mockFile.name);
    // Or if the file on your server is not yet in the right
    // size, you can let Dropzone download and resize it
    // callback and crossOrigin are optional.
    photoDropzone.createThumbnailFromUrl(mockFile, '@Globals.tempUploadFolderURL' + mockFile.name);

    // Make sure that there is no progress bar, etc...
    photoDropzone.emit("complete", mockFile);

    // If you use the maxFiles option, make sure you adjust it to the
    // correct amount:
    //var existingFileCount = 1; // The number of files already uploaded

    //Dropzone.options.maxFiles = myDropzone.options.maxFiles - existingFileCount;
}

//photoDropzone.files.length = mockFiles.length;

Answer 1

在尝试编写一个手动监控计数并修改默认文本值的解决方案后，我不希望黑客将 class 名称修改为 'fool' dropzone into thinking有文件。所以我添加了这个

photoDropzone.files.push(mockFile);

就在

下面

photoDropzone.emit("complete", mockFile);

现在 dropzone 知道它有多少文件，并且一切正常。推入数组的文件不会重新提交，这与最初添加模拟预览相同。

Dropzone.js 删除在页面加载时创建的模拟文件时，默认显示添加文件消息

Dropzone.js when removing a mock file created on page load, the default add files message shows

javascript

dropzone.js