dropzonejs使用示例

发表于 2026-04-2 更新于 2026-04- 2

作者 mdo

8~10 分钟 阅读

DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库.

文档地址

下载 dropzone.js

然后引入CSS和JS

`<link type="text/css" rel="stylesheet" href="/css/dropzone.min.css"/>
<script type="text/javascript"  src="/js/dropzone.min.js"></script>`

代码示例

`<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
    <title>上传图片</title>
    <link type="text/css" rel="stylesheet" href="/css/dropzone.min.css"/>
    <script type="text/javascript" src="/common/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="/js/dropzone.min.js"></script>
    <style type="text/css"> body{min-width:auto;}
        .dropzone{padding:0;height:400px;overflow:auto}
        form{margin:0;}
        .dropzone .dz-preview {margin:10px;}
        .dropzone .dz-preview .dz-image{width:108px;height:108px;}
        .dropzone .dz-message{margin: 14em 0;} </style>
  </head>
<body>
  <form action="/img/post" class="dropzone dz-clickable">
    <div class="dz-message needsclick">&nbsp;将文件夹拖拽到框内或点击框内选择图片</div>
  </form>
  <div style="text-align:center;padding-top:10px">
      <button id="uploadAll" type="button">确认上传</button>
  </div>
</body>
<script type="text/javascript"> var picNum = 0;
    Dropzone.autoDiscover = false;
    jQuery(document).ready(function() {
        var myDropzone = new Dropzone(".dropzone", {
            url: '/img/post',
            autoProcessQueue:false,
            parallelUploads:30,
            timeout:50000,
            addRemoveLinks: true,
            dictRemoveFile: '删除'
        })

        $('#uploadAll').on('click',function(e){
            if(picNum < 1){
                alert('没有需要上传的图片');
                return false;
            }

            var limitList = [6,8,12,24];
            if(!limitList.includes(picNum)){
                alert('上传图片需要是6张，8张，12张或者24张，如果不足请补全，如果多余请删除');
                return false;
            }

            uploadList = uploadList.sort();

            $("#uploadAll").attr("disabled", true);

            myDropzone.processQueue();

        });

        myDropzone.on("success", function() {
            picNum--;
            if(picNum == 0){
                picNum = 0;

            }
        });

        var uploadList = [];
        var isDelFile = true;


        myDropzone.on("addedfile", function(file) {

            var index = uploadList.indexOf(file.name);
            if(index * 1 !== -1){
                alert('文件已上传，请重新上传其他文件');

                isDelFile = false;
                myDropzone.removeFile(file);
                return false;
            }
            console.log('新增文件');
            uploadList.push(file.name)
            picNum++;
        });


        myDropzone.on("removedfile", function(file) {
            if(isDelFile){
                console.log('手动删除');
                var index = uploadList.indexOf(file.name);
                if(index * 1 !== -1){
                    uploadList.splice(index, 1);
                    picNum--;
                    return false;
                }
            }else{

                console.log('文件上传重复删除');
                isDelFile = true;
            }
        });


        myDropzone.on("sending", function(file, xhr, formData) {

            var index = uploadList.indexOf(file.name);
            formData.append('index', index);    
            formData.append('total', picNum);  
        });
    }); </script>
</html>`

知识库

dropzonejs 示例

许可协议: CC BY 4.0