Question

我正在尝试以编程方式将现有图片添加到我的dropzone，使用dropzone.js FAQ作为指南：

// Add the existing image if it's there.
// headerDropzone is my dropzone (debug shows it as existing and initialized at this point.
var on_load_header = $( '[name="on_load_header_image"]' ).val();
var on_load_header_path = $( '[name="on_load_header_image_path"]' ).val();

if ( on_load_header ) {

    // Hardcoded size value is just for testing, see my second question below.
    var on_load_header_data = { name: on_load_header, size: 12345 };

    // Call the default addedfile event handler
    headerDropzone.options.addedfile.call( headerDropzone, on_load_header_data );

    // And optionally show the thumbnail of the file:
    headerDropzone.options. thumbnail.call( headerDropzone, on_load_header_data, on_load_header_path);

}

我的第一个问题是这不起作用。 addedfile事件不会触发（或至少headerDropzone中的addedfile处理程序永远不会触发），缩略图也一样。

我的第二个问题/问题是：我是否必须提供文件大小？我可以得到服务器端，但如果我不需要，我宁愿不这样做。

Answer 1

如果您需要将多个现有文件添加到Dropzone中，请将现有文件声明为数组，然后在循环内以编程方式将其添加到Dropzone中，如此...

        Dropzone.autoDiscover = false;
        var myDropzone = new Dropzone("#myDropzone", {
            url: "/file/post",
            maxFileSize: 50,
            acceptedFiles: ".pdf",
            addRemoveLinks: true,
            //more dropzone options here
        });

        //Add existing files into dropzone
        var existingFiles = [
            { name: "Filename 1.pdf", size: 12345678 },
            { name: "Filename 2.pdf", size: 12345678 },
            { name: "Filename 3.pdf", size: 12345678 },
            { name: "Filename 4.pdf", size: 12345678 },
            { name: "Filename 5.pdf", size: 12345678 }
        ];

        for (i = 0; i < existingFiles.length; i++) {
            myDropzone.emit("addedfile", existingFiles[i]);
            //myDropzone.emit("thumbnail", existingFiles[i], "/image/url");
            myDropzone.emit("complete", existingFiles[i]);                
        }

Answer 2

Dropzone FAQ不包含使用（a）现有文件正确预加载dropzone所需的重要设置。

我的dropzone的init方法：

Dropzone.options.MyDropZoneID = {
    ...
    init: function () {
        var mockFile = { name: fileName, size: fileSize, type: fileMimeType, serverID: 0, accepted: true }; // use actual id server uses to identify the file (e.g. DB unique identifier)
        this.emit("addedfile", mockFile);
        this.createThumbnailFromUrl(mockFile, fileUrl);
        this.emit("success", mockFile);
        this.emit("complete", mockFile);
        this.files.push(mockFile);
        ...

我不知道上面是否是一个完美的实现，但它正在与maxFiles设置正常工作。如果你不想要有错误的行为，那就非常重要了（比如显示不应该上传的默认消息或上传的额外文件）。您肯定需要将accepted属性设置为true并将文件添加到files属性。我认为唯一不需要的就是取得成功。尽管如此，我还没有充分利用这一点。

注意：我使用了以下NuGet包：

创建者：Matias Meno
Id：dropzone
版本：4.2.0

Answer 3

查看函数headerDropzone.options.addedfile和headerDropzone.options.thumbnail是否实际定义。它应该按照你的方式工作，但没有进一步的信息，很难说出错了。

关于文件大小：不，没有必要实际提供准确的文件大小。这只是Dropzone自动显示文件大小。如果你不在乎是否显示了一些错误的文件大小，那么你可以只提供一些随机数或0。否则，您可能希望使用CSS隐藏文件大小，或者在添加后隐藏JS。（相关元素具有类dz-size。

它的JavaScript版本看起来像这样：

var fileSizeElement = on_load_header_data.previewElement.querySelector(".dz-size");
fileSizeElement.parentNode.removeChild(fileSizeElement);

Answer 4

最初我在这些方面做了一些事情，以编程方式将预先存在的文件上传到Dropzone：

<xsl:preserve-space elements="*" />
<xsl:strip-space elements="" />

<xsl:template match="coverPage">
    <fo:block font-size="12pt" color="black" text-align="center">
        <xsl:text>
            Static
            &#xA;
            text
        </xsl:text>
    </fo:block>
    <fo:block font-size="12pt" color="black" text-align="center" font-weight="bold">
        <xsl:text>
            bold.
        </xsl:text>
    </fo:block>
</xsl:template>

但是，引用此Dropzone Github Issue我发现了一种更简单的直接上传方式：

headerDropzone.emit("addedfile", imageFile);                                
headerDropzone.emit("thumbnail", imageFile, imageUrl);
headerDropzone.files.push(file);

很遗憾，Dropzone Documentation 中没有对此 uploadFiles 方法的引用，因此我认为我与所有Dropzone用户分享了一些知识

希望这有助于某人

Answer 5

现在在官方FAQ

中回答了这个问题

// Create the mock file:
var mockFile = { name: "Filename", size: 12345 };

// Call the default addedfile event handler
myDropzone.emit("addedfile", mockFile);

// And optionally show the thumbnail of the file:
myDropzone.emit("thumbnail", mockFile, "/image/url");
// 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.
myDropzone.createThumbnailFromUrl(file, imageUrl, callback, crossOrigin);

// Make sure that there is no progress bar, etc...
myDropzone.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
myDropzone.options.maxFiles = myDropzone.options.maxFiles - existingFileCount;

Answer 6

我遇到了同样的问题，发现了Dropzone的handleFiles(files)方法。

所以如果你有inputTypeFileRef，你可以

// inputTypeFiles.files is an object of type FileList
var fileArray = Object.values(inputTypeFiles.files || {});
myDropZone.handleFiles(fileArray);

这也会触发所有Dropzone的事件，并通过拖动文件通常会传递文件数据 - 进度，文件大小等。

希望它有所帮助。

Answer 7

最新的Dropzone缺少示例，文档不清晰或不完整。您可以使用以下内容将现有图像添加到Dropzone。

for (var i = 0; i < imagesList.length; i++) {
  let name = imagesList[i];
  name = name.substring(name.lastIndexOf('/') + 1);

  fetch(imagesList[i])
    .then(res => res.blob())
    .then(blob => {
      let file = new File([blob], name, blob);
      myDropzone1.addFile(file);
    });
}

imagesList是要添加到Dropzone的图像的列表。

但是，我仍然面临一个问题：未按照imagesList中的顺序/顺序添加或显示图像。它们显得相当随机。有没有办法使图像按imagesList中的顺序/顺序显示？

Answer 8

许多答案都过时了，在撰写本文时，这在我最新的Dropzone JS中起作用（请注意所包含的注释）：

init: function() {
    var dzObj = this;

    // In my template I looped through existing files from the database and created:
    // <div class="existing-image" data-url="/path/to/file.jpg"></div>
    $('.existing-image').each(function() {
        // I didn't have this data - works fine without
        var mockFile = { name: '', size: '', dataURL: $(this).data('url') };

        // Call the default addedfile event handler
        dzObj.emit("addedfile", mockFile);

        // The Dropzone JS FAQ incorrectly references "file" here instead of  mockFile".
        // The other parameters are outdated, dataURL goes in the object above,
        // and you need to pass through other parameters.
        // It DOES NOT WORK without the thumbnail event being triggered.
        dzObj.createThumbnailFromUrl(mockFile, dzObj.options.thumbnailWidth, dzObj.options.thumbnailHeight, dzObj.options.thumbnailMethod, true, function (dataUrl) {
            dzObj.emit("thumbnail", mockFile, dataUrl);
        });

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

        dzObj.options.maxFiles = dzObj.options.maxFiles - 1;
    });
}

Answer 9

@tjbp的回复对我来说效果很好，但进行了以下更改：

我无法删除以编程方式添加的文件，然后添加另一个。我通过删除将“ maxFiles”设置为0的这一行来解决此问题。

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

为确保“删除”按钮可见，我必须添加以下行：

if (mockFile.previewElement) {
    mockFile.previewElement.classList.add("dz-success");
}

Answer 10

5.7.0版对这里没有任何帮助，但确实如此：

var myDropzone = new Dropzone(document.body, {
    url: "<?= site_url('site/upload') ?>",
    acceptedFiles: "<?= $uploadFieldAcceptValue ?>",
    maxFilesize: 15,
    maxFiles: 5,
    autoQueue: false,
    thumbnailWidth: 80,
    thumbnailHeight: 80,
    init: function(){
        var that = this;

        that.on("addedfile", function(file) {
            // remove the start button
            var startButton = file.previewElement.querySelector(".start");
            if(startButton){
                startButton.parentNode.removeChild(startButton);
            }
        });

        <?php if(is_array($userUploads) && count($userUploads) > 0) { ?>
            <?php foreach($userUploads as $userUpload) { ?>
                <?php $file = $userUpload['file']; ?>

                var mockFile = {
                    name: '<?= basename($file) ?>', 
                    size: <?= filesize($file) ?>
                };

                var fileUrl = '<?= base_url() . str_replace('\\', '/', preg_replace('~^'. preg_quote(FCPATH) .'~', '', $file)) ?>';
                var callback = null;
                var crossOrigin = null;
                var resizeThumbnail = true;
                that.displayExistingFile(mockFile, fileUrl, callback, crossOrigin, resizeThumbnail);

                that.emit("success", mockFile);
                that.emit('complete', mockFile);

            <?php } ?>

            that.options.maxFiles = that.options.maxFiles - <?= count($userUploads) ?>;

        <?php } ?>
    }
});

Answer 11

在Dropzone 5.7.0上，有一个“ displayExistingFile”功能。我在init部分调用了它，效果很好。

     /**
     * Called when dropzone initialized
     * You can add event listeners here
     */
    init: function init() {
      var mockFile = { name: "Filename 1.pdf", size: 12345678 }; 
      this.displayExistingFile(mockFile,  "../../assets/site/wp-content/uploads/cropped-ic_credifisco-1-192x192.png");     
    },

以编程方式将现有文件添加到Dropzone

11 个答案: