javascript 如何使用 Dropzone.js 向您显示已存储在服务器上的文件

How can I show you the files already stored on server using Dropzone.js

提问by Marcogomesr

I Don't understand that... callits always undefined

我不明白……call它总是未定义的

Create the mock file:

创建模拟文件：

var mockFile = { name: "Filename", size: 12345 };

Call the default addedfile event handler

调用默认的 addedfile 事件处理程序

myDropzone.options.addedfile.call(myDropzone, mockFile);

And optionally show the thumbnail of the file:

并可选择显示文件的缩略图：

myDropzone.options. thumbnail.call(myDropzone, mockFile, "/image/url");

回答by Marcogomesr

Finally !!

最后 ！！

$(function() {
    var mockFile = { name: "banner2.jpg", size: 12345 };
    var myDropzone = new Dropzone("#my-awesome-dropzone");
    myDropzone.options.addedfile.call(myDropzone, mockFile);
    myDropzone.options.thumbnail.call(myDropzone, mockFile, "http://localhost/test/drop/uploads/banner2.jpg");
})

回答by Vicky Gonsalves

You can also do with the following code:

您还可以使用以下代码：

  <script>
        Dropzone.options.myAwesomeDropzone = false;
        Dropzone.autoDiscover = false;
        $("#image").dropzone({
            url: "http://someserver.com/upload.php",
            paramName: "image", // The name that will be used to transfer the file
            maxFilesize: 2, // MB
            maxFiles: 5,
            parallelUploads: 5,
            addRemoveLinks: true,
            dictMaxFilesExceeded: "You can only upload upto 5 images",
            dictRemoveFile: "Delete",
            dictCancelUploadConfirmation: "Are you sure to cancel upload?",
            accept: function (file, done) {
                console.log(file)
                if ((file.type).toLowerCase() != "image/jpg" &&
                        (file.type).toLowerCase() != "image/gif" &&
                        (file.type).toLowerCase() != "image/jpeg" &&
                        (file.type).toLowerCase() != "image/png"
                        ) {
                    done("Invalid file");
                }
                else {
                    done();
                }
            },
            init: function () {
                var mockFile = { name: "myimage.jpg", size: 12345, type: 'image/jpeg' };
                this.addFile.call(this, mockFile);
                this.options.thumbnail.call(this, mockFile, "http://someserver.com/myimage.jpg");
            }
        });
    </script>

EDIT

编辑

Since update of Dropzone 4.0 initfunction can be called as:

由于 Dropzone 4.0init功能的更新可以调用为：

init: function () {
   var mockFile = { name: "myimage.jpg", size: 12345, type: 'image/jpeg' };       
   this.options.addedfile.call(this, mockFile);
   this.options.thumbnail.call(this, mockFile, "http://someserver.com/myimage.jpg");
   mockFile.previewElement.classList.add('dz-success');
   mockFile.previewElement.classList.add('dz-complete');
}

回答by punky

my solution for >= 4.0, basing on "How to show files already stored on server": https://github.com/enyo/dropzone/wiki/FAQ

我的 >= 4.0 解决方案，基于“如何显示已存储在服务器上的文件”：https: //github.com/enyo/dropzone/wiki/FAQ

maxFiles: 1,

init: function () {
    this.on('maxfilesexceeded', function (file) {
        this.removeAllFiles();
        this.addFile(file);
    });

    var mocks = $dropzone.data('dropzone');
    for (var i = 0; i < mocks.length; i++) {
        var mock = mocks[i];
        mock.accepted = true;

        this.files.push(mock);
        this.emit('addedfile', mock);
        this.createThumbnailFromUrl(mock, mock.url);
        this.emit('complete', mock);
    }
}

回答by Oded Davidov

Based on punky's excellent answer above, you should not forget to add this._updateMaxFilesReachedClass();at the end, like so:

基于 punky 上面的出色回答，您不应忘记this._updateMaxFilesReachedClass();在最后添加，如下所示：

init: function () {
    var mockFile = { name: <filename>, size: <filesize>, type: <filetype>, url: <file_url> };
    this.files.push(mockFile);
    this.emit('addedfile', mockFile);
    this.createThumbnailFromUrl(mockFile, mockFile.url);
    this.emit('complete', mockFile);
    this._updateMaxFilesReachedClass();
}

回答by gihanchanuka

In this answer https://stackoverflow.com/a/17763511, it's implemeneted with emmiting a thumbnailevent.

在这个答案https://stackoverflow.com/a/17763511 中，它是通过发出缩略图事件来实现的。

Following is an example of doing it using createThumbnailFromUrl.

以下是使用createThumbnailFromUrl执行此操作的示例。

HTML element;

HTML 元素；

<form id="sample-img" action="/upload" class="dropzone">
    <div class="dz-default dz-message"></div>
</form>

JS code;

JS代码；

previewThumbailFromUrl({
    selector: 'sample-img',
    fileName: 'sampleImg',
    imageURL: '/images/sample.png'
});

function previewThumbailFromUrl(opts) {
    var imgDropzone = Dropzone.forElement("#" + opts.selector);
    var mockFile = {
        name: opts.fileName,
        size: 12345,
        accepted: true,
        kind: 'image'
    };
    imgDropzone.emit("addedfile", mockFile);
    imgDropzone.files.push(mockFile);
    imgDropzone.createThumbnailFromUrl(mockFile, opts.imageURL, function() {
        imgDropzone.emit("complete", mockFile);
    });
}

Working Samples on JSFiddle:

JSFiddle 上的工作示例：

1. Load images on same domain
2. Load images with crossOrigin

1. 在同一个域上加载图像
2. 使用 crossOrigin 加载图像

回答by Konstantin XFlash Stratigenas

 var mockFile = { name: "banner2.jpg", size: 12345, uuid: "085b2b23-70e7-4175-8355-89937d8d46f2" };
 myDropzone.emit("addedfile", mockFile);
 myDropzone.options.thumbnail.call(myDropzone, mockFile, "https://your-thumbnail-image.jpg");

On Init-Function of the Dropzone-Object init: function() { call this:

在 Dropzone-Object init 的 Init-Function 上：function() { 调用这个：

  this.on("addedfile", function(file) {
                        //Access the preview element with file.previewElement and add event listeners, etc... to it.
                        var a = document.createElement('a');
                        a.setAttribute('href',"{{{protokoll}}}://{{{HTTP_HOST}}}/a-getfiledb.php?uuid="+file.uuid);
                        a.setAttribute('class',"btn btn-success");
                        a.setAttribute('style',"width:50%; margin-top:5px; border-left:1px solid black; cursor:pointer;");
                        a.innerHTML = "<i class='glyphicon glyphicon-download-alt'></i>";
                        file.previewTemplate.appendChild(a);
  });

回答by ux.engineer

I was having hard time with this also. This one as a starting point would have helped even more:

我也很难过。将此作为起点会更有帮助：

Dropzone.autoDiscover = false; // otherwise will be initialized twice
var myDropzoneOptions = {
    maxFilesize: 5,
    addRemoveLinks: true,
    clickable: true
};
var myDropzone = new Dropzone('#myDropzoneElement', myDropzoneOptions);
var mockFile = { name: "Existing file!", size: 12345 };
myDropzone.options.addedfile.call(myDropzone, mockFile);
myDropzone.options.thumbnail.call(myDropzone, mockFile, "http://url-to-thumb-goes-here");

回答by Algoleigol

You can try with this

你可以试试这个

var file_image = "http://someserver.com/myimage.jpg";

var mockFile = { name: "myimage.jpg", size: 12345 };

$("#dropzone").dropzone({

    url: 'false',
    maxFiles: 1,
    maxFilesize:10,//mb
    acceptedFiles:'image/*',
    init: function() {
        this.on("addedfile", function(file){
            this.options.thumbnail.call(this,file,file_image);
         });
         this.addFile.call(this,mockFile);
    }
});