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

我不明白，…总是不确定的

创build模拟文件：

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

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

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

并可select显示文件的缩略图：

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

Answer 1

终于！

 $(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"); }) 

Answer 2

您也可以使用以下代码：

  <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> 

编辑

由于Dropzone 4.0 init函数的更新可以被调用为：

 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'); } 

Answer 3

我的解决scheme> = 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); } } 

Answer 4

在这个回答https://stackoverflow.com/a/17763511 ，它是用emmiting 缩略图事件来实现的。

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

HTML元素;

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

JS代码;

 previewThumbailFromUrl({ selector: 'sample-img', fileName: 'sampleImg', imageURL: 'http://img.dovov.comsample.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); }); } 

在JSFiddle上工作示例：

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

Answer 5

基于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(); } 

Answer 6

我也遇到了困难。 这一个作为起点可能会有更多的帮助：

 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"); 

Answer 7

你可以试试这个

 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); } });