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

我不明白... call其始终未定义

创建模拟文件：

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

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

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

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

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

9个解决方案

44 votes

终于!!

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

})

Marcogomesr answered 2019-12-27T05:40:15Z

34 votes

您也可以使用以下代码：

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

}

});

编辑

由于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');

}

Vicky Gonsalves answered 2019-12-27T05:40:44Z

17 votes

我的解决方案> = 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);

}

}

punky answered 2019-12-27T05:41:04Z

6 votes

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

init: function () {

var mockFile = { name: , size: , type: , url: };

this.files.push(mockFile);

this.emit('addedfile', mockFile);

this.createThumbnailFromUrl(mockFile, mockFile.url);

this.emit('complete', mockFile);

this._updateMaxFilesReachedClass();

}

Oded Davidov answered 2019-12-27T05:41:24Z

5 votes

在此答案中，[https://stackoverflow.com/a/17763511]通过执行缩略图事件来实现。

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

HTML元素；

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

});

}

JSFiddle上的工作样本：

将图片加载到同一域

使用crossOrigin加载图像

gihanchanuka answered 2019-12-27T05:42:10Z

0 votes

我也很难过。 以此为起点可以帮助更多：

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

envision answered 2019-12-27T05:42:29Z

0 votes

在版本> 5中，createThumbnailFromUrl的参数已更改。要使其再次起作用，请查看以下GitHub问题：[https://github.com/enyo/dropzone/issues/1587#issuecomment-324023260]

Paul Beck answered 2019-12-27T05:42:50Z

0 votes

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

在Dropzone-Object的Init-Function上init：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 = "";

file.previewTemplate.appendChild(a);

});

-2 votes

你可以尝试一下

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

}

});

Algoleigol answered 2019-12-27T05:43:30Z