dropzone - 使预览文件可以点击

gam*_*mer 4 javascript jquery dropzone.js

这是我在django项目中所做的:

<link href="{% static 'media/dropzone/dist/min/dropzone.min.css' %}" type="text/css" rel="stylesheet" />
<form class="dropzone" id="my-media-dropzone" action="/some/url/" method="post" enctype="multipart/form-data">{% csrf_token %}</form>
<script src="{% static 'media/dropzone/dist/dropzone.js' %}"></script>
<script type="text/javascript">
    Dropzone.options.myMediaDropzone = {
        paramName: "file",
        maxFileSize: 2,
        uploadMultiple: false,
        clickable: true // I want the preview file to be clickable
    };
</script>
Run Code Online (Sandbox Code Playgroud)

文件将添加到dropzone中,并显示预览文件.因此,如果添加5个文件,则会在dropzone框中显示5个文件.

我想让这些预览文件可以点击(使它们成为URL链接).

我该怎么做呢?

sli*_*oad 5

文档不是很好但是如果你看一下提示,你可以找到你想要的东西:

myDropzone.on("addedfile", function(file) {
  file.previewElement.addEventListener("click", function() {
    myDropzone.removeFile(file);
  });
});
Run Code Online (Sandbox Code Playgroud)

当然,您不希望在单击文件时删除该文件,但您可以将该myDropzone.removeFile(file);行替换为您想要的任何内容.

也许是这样的:

window.location.replace("http://stackoverflow.com");
// or
window.location.replace("mywebsite.com/"+file.name);
Run Code Online (Sandbox Code Playgroud)