Question

我目前正在尝试使用dropzone.js库在我的网站上实现一个拖放上传功能。到目前为止，这种方法运行良好，但我希望用户能够在上传完成后点击它们来查看上传的图片。

我考虑过购买包括像fancybox或lightbox这样的库，但我不知道如何将这个实现到上传的dropzone-elements。任何帮助/ tipps将非常感激，我无法在网站的任何地方找到我的问题的答案。

提前致谢：）

Answer 1

我使用dropzone已经很长时间了，这意味着我使用的是旧版本，但我想我可以指出你正确的方向。

上传完成后，您会看到上传照片的缩略图视图，当您将鼠标悬停在此照片缩略图上时，您可能会看到详细信息，例如文件的大小和名称。您可以添加一个名为＆＃34;查看更大图像＆＃34;的按钮或锚标记。以及这些细节。

因此，当您将鼠标悬停在缩略图上时，您将能够看到

（大小）

（名称）

查看更大的图像锚点/按钮

您可以通过绑定Dropzone的成功功能来实现此目的。我从来没有使用过fancybox，所以我不确定绑定它的代码。根据我的理解，将用于使用Fancybox打开较大图像的锚点将其href值作为图像的路径。代码如下： -

var myDropzone = new Dropzone("#my-dropzone");
//Success function is called when image is successfully uploaded.
myDropzone.on("success", function(file, responseText, e) {
   //previewElement contains HTML that is needed to display thumbnail
   var preview_element = file.previewElement;

   var image_name = file.name;

   //create the anchor tag and specify HREF as image name or path
   var anchor_to_fancybox = document.createElement("a");
   $(anchor_to_fancybox).attr('href', image_name);

   //When you hover over the thumbnail, a div called dz-details is shown.
   //This div is contained within previewElement and contains size and name. 
   //Append our anchor in its HTML.
   $(preview_element).find('.dz-details').append(anchor_to_fancybox);

   //bind anchor to fancybox. Probably as $(anchor_to_fancybox).fancybox();

});

将dropzone.js与fancybox.js结合使用，可以全屏显示上传的照片

1 个答案: