dropzonejs使用示例

小ms莫

已于 2023-07-06 17:15:44 修改

阅读量409

点赞数

文章标签： jquery javascript

于 2023-07-06 17:14:04 首次发布

本文链接：https://blog.csdn.net/liaoyes/article/details/131580838

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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) {
        	// 发送前调用，每次保存文件时，都带有formData参数
            var index = uploadList.indexOf(file.name);
            formData.append('index', index);	// 文件索引
            formData.append('total', picNum);  // 文件总数
        });
    });
</script>
</html>