24

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 イベントは発生しません (または、少なくとも addedfile ハンドラーは発生しheaderDropzoneません)。サムネイルについても同様です。

私の2番目の問題/質問は、ファイルサイズを提供する必要がありますか? サーバー側で取得することもできますが、実際に必要がない場合は実行したくありません。

4

11 に答える 11

26

複数の既存のファイルを 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]);                
        }
于 2015-02-22T14:01:39.067 に答える
22

Dropzone の FAQでは、ドロップゾーンに既存のファイルを適切にプリロードするために必要な重要な設定が省略されています。

私のドロップゾーンの初期化方法：

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 パッケージを使用しました。

  • 作成者: マティアス・メノ
  • Id: ドロップゾーン
  • バージョン: 4.2.0
于 2015-11-06T16:08:53.117 に答える
11

関数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);
于 2013-07-11T21:15:41.587 に答える
7

もともと私は、既存のファイルをDropzoneにプログラムでアップロードするために、これらの行に沿って何かをしていました:

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

ただし、このDropzone Github Issueを参照すると、直接アップロードするより簡単な方法が見つかりました。

headerDropzone.uploadFiles([imageFile])

残念ながら、 Dropzone DocumentationにはこのuploadFilesメソッドへの参照はありません。そのため、すべての Dropzone ユーザーと知識を共有したいと考えました。

これが誰かを助けることを願っています

于 2016-04-22T19:49:44.823 に答える
4

私は同じ問題を抱えていて、Dropzone のhandleFiles(files)方法を見つけました。

あなたが持っているならinputTypeFileRef、あなたはできる

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

また、すべての のイベントをトリガーし、Dropzone通常はファイルをドラッグすることでファイル データ (進行状況、ファイル サイズなど) を渡します。

それが役に立ったことを願っています。

于 2016-05-05T15:50:41.980 に答える
0

ここでは、バージョン 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 } ?>
    }
});
于 2020-03-17T21:09:23.447 に答える