(精华)2020年7月16日 JavaScript 插件 dropZone.js拖动文件上传
程序员文章站
2022-03-22 10:07:51
//这段代码是展示dropzone.js的精髓
...<div class="form-group">
<label class="title">真人照(最多只能传一张)</label>
<div id="dropz" class="dropzone"></div>//这段代码是展示dropzone.js的精髓
</div>
<input type="hidden" name="file_id" ng-model="file_id" id="file_id"/>
var appElement = document.querySelector('div .inmodal');
var myDropzone = new Dropzone("#dropz", {
url: "/admin/upload",//文件提交地址
method:"post", //也可用put
paramName:"file", //默认为file
maxFiles:1,//一次性上传的文件数量上限
maxFilesize: 2, //文件大小,单位:MB
acceptedFiles: ".jpg,.gif,.png,.jpeg", //上传的类型
addRemoveLinks:true,
parallelUploads: 1,//一次上传的文件数量
//previewsContainer:"#preview",//上传图片的预览窗口
dictDefaultMessage:'拖动文件至此或者点击上传',
dictMaxFilesExceeded: "您最多只能上传1个文件!",
dictResponseError: '文件上传失败!',
dictInvalidFileType: "文件类型只能是*.jpg,*.gif,*.png,*.jpeg。",
dictFallbackMessage:"浏览器不受支持",
dictFileTooBig:"文件过大上传文件最大支持.",
dictRemoveLinks: "删除",
dictCancelUpload: "取消",
init:function(){
this.on("addedfile", function(file) {
//上传文件时触发的事件
document.querySelector('div .dz-default').style.display = 'none';
});
this.on("success",function(file,data){
//上传成功触发的事件
console.log('ok');
angular.element(appElement).scope().file_id = data.data.id;
});
this.on("error",function (file,data) {
//上传失败触发的事件
console.log('fail');
var message = '';
//lavarel框架有一个表单验证,
//对于ajax请求,JSON 响应会发送一个 422 HTTP 状态码,
//对应file.accepted的值是false,在这里捕捉表单验证的错误提示
if (file.accepted){
$.each(data,function (key,val) {
message = message + val[0] + ';';
})
//控制器层面的错误提示,file.accepted = true的时候;
alert(message);
}
});
this.on("removedfile",function(file){
//删除文件时触发的方法
var file_id = angular.element(appElement).scope().file_id;
if (file_id){
$.post('/admin/del/'+ file_id,{'_method':'DELETE'},function (data) {
console.log('删除结果:'+data.message);
})
}
angular.element(appElement).scope().file_id = 0;
document.querySelector('div .dz-default').style.display = 'block';
});
}
});
本文地址:https://blog.csdn.net/aa2528877987/article/details/107378298