一，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 +'">');
}
}
});
网友评论