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

Question

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

从拖放区中删除任何现有文件会显示 dictDefaultMessage

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

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

在尝试编写手动监视计数并修改默认文本值的解决方案后，我不希望黑客修改类名以"愚弄"拖放区认为有文件。所以我添加了这个

photoDropzone.files.push(mockFile);

就在下面

photoDropzone.emit("complete", mockFile);

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