基于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='http://www.b3g6.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、上傳成功：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
網公網安備