dropzone拖拽上传

一，dropzone拖拽上传

    官方文档：https://www.dropzonejs.com

    汉化文档：http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/#

二，引入文件

CSS:

<link rel="stylesheet" href="/static/dist/min/basic.min.css" media="all">

<link rel="stylesheet" href="/static/dist/min/dropzone.min.css" media="all">

Jquery:

<script src="/static/js/jquery-3.5.1.min.js"></script>

JS:

<script src="/static/dist/min/dropzone.min.js"></script>

三，html + javascript

<div class="layui-upload-list" id="demo2"> </div>
<div class="dropzone needsclick dz-clickable" id="demo-upload" style="margin: 0 30px 0 110px;"> <div class="dz-message needsclick"> <div style="text-align: center"><img src="/static/icon/img.png" alt=""></div> <button type="button" class="layui-btn layui-btn-lg layui-btn-normal">点击任意地方选择文件</button> <p style="font-size: 20px;color: #999;line-height: 36px">或将文件拖到这里</p> </div></div>

jquery(一下内容放在javascript标签内):

Dropzone.autoDiscover =false;

Dropzone.prototype.defaultOptions.dictDefaultMessage ="将文件拖到此处.";

Dropzone.prototype.defaultOptions.dictFallbackMessage ="您的浏览器不支持拖放文件上传.";

Dropzone.prototype.defaultOptions.dictFallbackText ="请使用回退表上传你的文件.";

Dropzone.prototype.defaultOptions.dictFileTooBig ="文件太大 ({{filesize}}M). 最大上传文件: {{maxFilesize}}M.";

Dropzone.prototype.defaultOptions.dictInvalidFileType ="无法上传此文件类型.";

Dropzone.prototype.defaultOptions.dictResponseError ="服务器 {{statusCode}}.";

Dropzone.prototype.defaultOptions.dictCancelUpload ="取消上传.";

Dropzone.prototype.defaultOptions.dictCancelUploadConfirmation ="是否确实要取消上传?";

Dropzone.prototype.defaultOptions.dictRemoveFile ="删除文件.";

Dropzone.prototype.defaultOptions.dictMaxFilesExceeded ="您不能再上传任何文件.";

$("#demo-upload").dropzone({

paramName:"file",

url:'/admin/Library/uploanfile',//上传地址

        method:'post',//方式

        addRemoveLinks:true,

dictRemoveFile:'删除',

maxFiles:1000,

maxFilesize:200,

filesizeBase:1024,

timeout:300000000,

uploadMultiple:true,

parallelUploads:true,

previewsContainer:null,

clickable:true,

acceptedFiles:".pdf, .doc,.txt,.docx,.xlsx,.xls,.png,.jpg,.gif,.png,.mp4",

init:function() {

var self =this;

// config

            self.options.addRemoveLinks =true;

self.options.dictRemoveFile ="删除";

//New file added

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

console.log('new file added ', file);

});

// Send file starts

            self.on("sending",function(file) {

console.log('upload started', file);

$('.meter').show();

});

// File upload Progress

            self.on("totaluploadprogress",function(progress) {

console.log("progress ", progress);

$('.roller').width(progress +'%');

});

self.on("queuecomplete",function(progress) {

$('.meter').delay(999).slideUp(999);

});

// On removing file

            self.on("removedfile",function(file) {

console.log(file);

});

self.on("success",function(file) {

$(".dz-success-mark").css("opacity",1);

//$(".dz-error-mark").css("display", "none");

            });

self.on("error",function(file) {

//$(".dz-error-mark svg").css("background", "red");

                $(".dz-success-mark").css("opacity","1");

});

},

success:function(file, response, e) {

// $('.dz-error-mark').show();

// console.log(file);

// console.log(response);

// console.log(e);

// $(e).remove();

            var res = response;

if(res.type =='image'){

var dou ="'";

$('#demo2 .img').append('<input type="hidden" name="img[]" value="'+res.name +'-*-'+res.oname +'-*-'+res.mime +'-*-'+res.size +'">');

}else if(res.type =='video'){

$('#demo2 .video').append('<input type="hidden" name="video[]" value="'+res.name +'-*-'+res.oname +'-*-'+res.mime +'-*-'+res.size +'">');

}else{

$('#demo2 .file').append('<input type="hidden" name="wenjian[]" value="'+res.name +'-*-'+res.oname +'-*-'+res.mime +'-*-'+res.size +'">');

}

}

});