一，dropzone拖拽上传
官方文档：https://www.dropzonejs.com
汉化文档：http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/#
二，引入文件
CSS:
Jquery:
JS:
三，html + javascript
或将文件拖到这里
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('');
}else if(res.type =='video'){
$('#demo2 .video').append('');
}else{
$('#demo2 .file').append('');
}
}
});