如何以编程方式向Dropzone添加缩略图?

时间:2014-09-05 13:37:12

标签: jquery dropzone.js

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

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

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

我的dropzones的代码是:

 $(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缩略图?

1 个答案:

答案 0 :(得分:4)

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

  • 创建一个描述存储在服务器中的文件的对象(包含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中找到解释此过程: