gpt4 book ai didi

jquery - 如何以编程方式将缩略图添加到 Dropzone?

转载 作者:行者123 更新时间:2023-12-01 03:12:14 25 4
gpt4 key购买 nike

我使用 Dropzone 来允许用户上传文件,允许用户将图像与页面上的多个标题之一相关联。我以编程方式生成 Dropzones,每个标题一个,当文件上传时,我将哪个标题与哪个上传的文件关联保存在数据库中。

我非常喜欢它在上传文件时生成的 Dropzone 缩略图。在页面加载时,我想向服务器查询现有图像,并将这些图像放入正确放置区的缩略图中。

如何以编程方式将 URL 中的缩略图关联到特定 Dropzone?

我的拖放区的代码是:

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

}
);

});
});

我有一个服务器端函数,可以查询和查找带有图像的标题,它通过 SignalR 调用一个方法

lnk.client.updateImage = function(image) {

var headingID = image.ID;

$('#' + headingID + ' .existingImage').html(image.imageURL);

}

如何使用“image.imageURL”激活 dropzone 缩略图?

最佳答案

对于要添加的每个图像,您必须:

  • 创建一个对象来描述存储在服务器中的文件(包含名称、大小以及 Dropzone 实例使用的其他信息);

  • 调用“addedfile”事件处理程序,传递上一步中创建的对象;

  • 调用“thumbnail”事件处理程序来显示新图像,并传递相同的对象和缩略图 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");

您可以在项目 wiki 中找到此过程的解释:

关于jquery - 如何以编程方式将缩略图添加到 Dropzone?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25687209/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com