1、dropzone.js
dropzone.js是一个可预览\\可定制化的文件拖拽上传，实现AJAX异步上传文件的工具
2、dropzone.js前端界面上传方式
官网下载 并且引入dropzone.js和dropzone.css（http://www.dropzonejs.com/）以及引用jquery.js，定义一个class=\”dropzone\”即可完成，
代码示例：
<!DOCTYPE html> <html> <head> <meta charset=\"utf-8\"> <title>Flask upload with Dropzone example</title> <link rel=\"stylesheet\" href=\"/static/css/dropzone.css\" rel=\"external nofollow\" type=\"text/css\" /> <script src=\"/static/js/jquery-3.3.1.js\"></script> <script src=\"/static/js/dropzone.js\"></script> </head> <body>
方法1：
<form id =\"myAwesomeDropzone\" action=\"{{ request.path }}\" class=\"dropzone\" method=\"POST\" enctype=\"multipart/form-data\"></form>
//这段代码是展示dropzone.js的精髓,class一定要是dropzone，id可以自定义
<script type=\"text/javascript\">
//第二种配置，这种使用的是div做上传区域时使用的配置
Dropzone.autoDiscover = false;//不知道该行有什么用，欢迎高手下方评论解答
$(\"#myAwesomeDropzone\").dropzone({
url: \"{{ request.path }}\",
addRemoveLinks: true,
method: \'post\',
filesizeBase: 1024
});
</script>
方法2：
<div class=\"form-group\">
<label class=\"title\">真人照(最多只能传一张)</label>
<div id=\"dropz\" class=\"dropzone\"></div>//这段代码是展示dropzone.js的精髓,class一定要是dropzone，id可以自定义
</div>
<input type=\"hidden\" name=\"file_id\" ng-model=\"file_id\" id=\"file_id\"/>
<script type=\"text/javascript\">
var appElement = document.querySelector(\'div .inmodal\');
var myDropzone = new Dropzone(\"#dropz\", {
url: \"{{ request.path }}\",//文件提交地址
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){
alert(data.data)
//上传成功触发的事件
console.log(\'ok\');
});
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){
//删除文件时触发的方法(向后台发送删除文件请求)
{# $.post(\'/admin/del/\'+ file_id,{\'_method\':\'DELETE\'},function (data) {#}
{# console.log(\'删除结果:\'+data.message);#}
{# })#}
document.querySelector(\'div .dz-default\').style.display = \'block\';
});
}
});
</script>
</body>
</html>
方法二中，很多参数是不一定需要定义的，参见方法一
3、后台处理dropzone.js前端界面上传的文件
A、django的settings.py 文件定义上传文件夹：
#文件上传文件夹定义
ENROLLED_DATA = \’%s/statics/enrolled_data\’ %BASE_DIR
B、对应的view处理前端上传过来的数据：
from django.views.decorators.csrf import csrf_exempt
from PerfectCRM.settings import *
import os
@csrf_exempt
def upload(request):
if request.method ==\'POST\': #post方式
if request.is_ajax(): #如果是ajax请求
if not os.path.exists(ENROLLED_DATA): #如果settings定义的 上传文件夹不存在
os.makedirs(ENROLLED_DATA,exist_ok=True) #新建文件夹
for k,file_obj in request.FILES.items(): #获取前端传过来的文件数据
with open(\'%s/%s\'%(ENROLLED_DATA,file_obj.name),\"wb\") as f: #打开文件
for chunk in file_obj.chunks():
f.write(chunk) #chunk方式写入文件
return render(request, \'dropzone-back.html\')
C、上传成功：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
© 版权声明
THE END
暂无评论内容