dropzone-使预览文件可点击
dropzone - make preview files clickable
以下是我在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>
文件将添加到dropzone中,并显示预览文件。因此,如果添加5个文件,则会在dropzone框中显示5个文件。
我想让这些预览文件可以点击(使它们成为URL链接)。
我该怎么做?
文档并不好,但如果你在Tips下查看,你可以找到你想要的:
myDropzone.on("addedfile", function(file) {
file.previewElement.addEventListener("click", function() {
myDropzone.removeFile(file);
});
});
当然,您不希望在单击该文件时将其删除,但您可以将myDropzone.removeFile(file);
行替换为所需的任何内容。
也许类似于:
window.location.replace("http://stackoverflow.com");
// or
window.location.replace("mywebsite.com/"+file.name);
相关文章:
- 正在使用Dropzone.js删除服务器上已重命名的文件
- dropzone-使预览文件可点击
- Laravel&Dropzone.js文件请求
- Dropzone最大文件大小超过事件
- 如何禁用dropzone's自动上传文件
- 如何在dropzone.js中获取选定的文件路径
- Dropzone.js-上传文件夹结构和单个文件
- 在使用Dropzone.js添加文件之前,是否可以有弹出选项
- 使用dropzone上传文件后显示成功消息
- Dropzone.js没有将图像上传到文件夹
- 使用Fluentlenium在dropzone.js中上传文件
- 正在提交带有base64编码文件的Dropzone.js
- 如何允许Dropzone.js失败后重新提交文件上传
- Dropzone-自动删除未接受文件的缩略图
- 如何让 Dropzone.js 仅在单击提交按钮时上传文件
- 如何在Angularjs中使用Dropzone显示已经存储在服务器上的文件
- Dropzone.js :在 php-webdriver 集成测试中上传文件而不带浏览对话框
- 重命名上传的文件,以便可以将其删除 DropZone.js
- 如何从Dropzone上传和删除文件.js
- Dropzone.js:自定义文件浏览器 - 添加已上传的文件