Dropzone 控件上传图片、加载服务器图片

最新推荐文章于 2021-10-05 22:19:20 发布

原创最新推荐文章于 2021-10-05 22:19:20 发布 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

JavaScript/JQuery 专栏收录该内容

22 篇文章

订阅专栏

本文详细介绍了如何使用Dropzone.js实现文件上传功能，包括禁用与启用上传区域、手动初始化图片显示等功能。通过设置参数，可以控制上传文件的大小、类型及数量限制，并演示了如何监听上传成功及删除文件的事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<html>
<head>

    <link rel="stylesheet" href="http://cn.inspinia.cn/html/inspiniaen/css/plugins/dropzone/dropzone.css">
    <script src="../script/plugins/dropzone/dropzone.js"></script>
</head>

<body>
<div id="dropzoneForm" class="dropzone" action="uploadFileUrl"></div>

<%--禁用后，上传区域不可点击--%>
<button onclick="DROPZONE.removeEventListeners();">禁用</button>
<%--启用后，上传区域恢复点击上传文件--%>
<button onclick="DROPZONE.setupEventListeners();">启用</button>
<%--手动初始化一张已存在的服务器图片到dropzone--%>
<button onclick="setImg()">加载网络图片</button>
</body>


<script type="text/javascript">
    Dropzone.options.dropzoneForm = {
        paramName: "file", // The name that will be used to transfer the file
        maxFilesize: 2, // MB
        maxFiles: 3,
        dictDefaultMessage: "<strong>点击上传站点图片。</strong>",
        acceptedFiles: 'image/*',
        addRemoveLinks: true,
        dictRemoveFile: "删除",
        init: function () {
            DROPZONE = this;
            DROPZONE.on("success", function (file, response) {
                //response 是上传图片 服务器返回值
                console.log(JSON.stringify(response));
            });

            DROPZONE.on("removedfile", function (file) {
                //删除文件触发的事件
                console.log(file.name)
            });
        },
    };

function setImg(){
    //初始化服务器图片到dropzone （不可跨域请求）
    var url = "http://xxx/xxx.jpg";
    var mockFile = {name: "stop.jpg", accepted: true, status: "success", processing: "true", url: url};
    DROPZONE.emit("addedfile", mockFile);
    DROPZONE.emit("thumbnail", mockFile, url);
    DROPZONE.emit("complete", mockFile);
    DROPZONE.createThumbnailFromUrl(mockFile, url);
}

</script>

</html>