基于django和dropzone.js实现上传文件
1、dropzone.js
http://www.dropzonejs.com/
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='https://www.haobala.com/static/css/dropzone.css' rel='external nofollow' type='text/css' /> <script src='https://rkxy.com.cn/static/js/jquery-3.3.1.js'></script> <script src='https://rkxy.com.cn/static/js/dropzone.js'></script></head><body>
方法1：
<form action='{{ request.path }}' 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 class='dropzone'></div>//这段代码是展示dropzone.js的精髓,class一定要是dropzone，id可以自定义</div><input type='hidden' name='file_id' ng-model='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_exemptfrom PerfectCRM.settings import *import os@csrf_exemptdef 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、上传成功：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持好吧啦网。
相关文章：
网公网安备