Jquery 如何以编程方式向Dropzone添加缩略图?
我使用Dropzone允许用户上传文件,允许用户将图像与页面上的几个标题之一关联。我以编程方式生成DropZone,每个标题对应一个,当上传文件时,我将哪个标题与上传的文件关联保存在数据库中 我非常喜欢上传文件时生成的Dropzone缩略图。在pageload上,我想查询服务器上现有的图像,并将这些图像放入缩略图中,以找到正确的dropzone 如何以编程方式将URL中的缩略图与特定Dropzone关联 我的dropzones的代码是:Jquery 如何以编程方式向Dropzone添加缩略图?,jquery,dropzone.js,Jquery,Dropzone.js,我使用Dropzone允许用户上传文件,允许用户将图像与页面上的几个标题之一关联。我以编程方式生成DropZone,每个标题对应一个,当上传文件时,我将哪个标题与上传的文件关联保存在数据库中 我非常喜欢上传文件时生成的Dropzone缩略图。在pageload上,我想查询服务器上现有的图像,并将这些图像放入缩略图中,以找到正确的dropzone 如何以编程方式将URL中的缩略图与特定Dropzone关联 我的dropzones的代码是: $(function () { $('.newdrop
$(function () {
$('.newdrop').each(function (index) {
var id = parseInt($(this).closest("a").attr("id"));
var dropzoneID = "#drop" + id;
var newDropzone = new Dropzone(dropzoneID, {
url: "/VoltLink/SaveUploadedFiles/" + id,
clickable: false,
maxFiles: 1,
init : function() {
this.on("addedfile", function() {
if (this.files[1]!=null){
this.removeFile(this.files[0]);
}
});
}
}
);
});
});
我有一个服务器端函数,可以查询和查找带有图像的标题,它通过signar调用一个方法
lnk.client.updateImage = function(image) {
var headingID = image.ID;
$('#' + headingID + ' .existingImage').html(image.imageURL);
}
如何使用“image.imageURL”激活dropzone缩略图 对于要添加的每个图像,您必须:
- 创建一个描述存储在服务器中的文件的对象(使用Dropzone实例使用的名称、大小和其他信息)
- 调用“addedfile”事件处理程序,传递在上一步中创建的对象
- 调用“缩略图”事件处理程序以显示新图像,并传递相同的对象和缩略图URL
var myFile = {
name: "image-name-example",
size: 987654321
};
var myDropzone = Dropzone.forElement("my-dropzone-form");
myDropzone.emit("addedfile", myFile);
myDropzone.emit("thumbnail", myFile, "http://url/to/my/thumbnail");
您可以在project wiki中找到此过程的说明: