一，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">點(diǎn)擊任意地方選擇文件</button> <p style="font-size: 20px;color: #999;line-height: 36px">或?qū)⑽募系竭@里</p> </div></div>
jquery(一下內(nèi)容放在javascript標(biāo)簽內(nèi)):
Dropzone.autoDiscover =false;Dropzone.prototype.defaultOptions.dictDefaultMessage ="將文件拖到此處.";
Dropzone.prototype.defaultOptions.dictFallbackMessage ="您的瀏覽器不支持拖放文件上傳.";
Dropzone.prototype.defaultOptions.dictFallbackText ="請(qǐng)使用回退表上傳你的文件.";
Dropzone.prototype.defaultOptions.dictFileTooBig ="文件太大 ({{filesize}}M). 最大上傳文件: {{maxFilesize}}M.";
Dropzone.prototype.defaultOptions.dictInvalidFileType ="無法上傳此文件類型.";
Dropzone.prototype.defaultOptions.dictResponseError ="服務(wù)器 {{statusCode}}.";
Dropzone.prototype.defaultOptions.dictCancelUpload ="取消上傳.";
Dropzone.prototype.defaultOptions.dictCancelUploadConfirmation ="是否確實(shí)要取消上傳?";
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 +'">');
}
}
});
