基于django和dropzone.js實(shí)現(xiàn)上傳文件
1、dropzone.js
http://www.dropzonejs.com/
dropzone.js是一個(gè)可預(yù)覽可定制化的文件拖拽上傳，實(shí)現(xiàn)AJAX異步上傳文件的工具
2、dropzone.js前端界面上傳方式
官網(wǎng)下載 并且引入dropzone.js和dropzone.css（http://www.dropzonejs.com/）以及引用jquery.js，定義一個(gè)class='dropzone'即可完成，
代碼示例：
<!DOCTYPE html><html><head> <meta charset='utf-8'> <title>Flask upload with Dropzone example</title> <link rel='stylesheet' href='http://www.lshqa.cn/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做上傳區(qū)域時(shí)使用的配置 Dropzone.autoDiscover = false;//不知道該行有什么用，歡迎高手下方評(píng)論解答 $('#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', //默認(rèn)為file maxFiles:1,//一次性上傳的文件數(shù)量上限 maxFilesize: 2, //文件大小，單位：MB acceptedFiles: '.jpg,.gif,.png,.jpeg', //上傳的類型 addRemoveLinks:true, parallelUploads: 1,//一次上傳的文件數(shù)量 //previewsContainer:'#preview',//上傳圖片的預(yù)覽窗口 dictDefaultMessage:’拖動(dòng)文件至此或者點(diǎn)擊上傳’, dictMaxFilesExceeded: '您最多只能上傳1個(gè)文件！', dictResponseError: ’文件上傳失敗!’, dictInvalidFileType: '文件類型只能是*.jpg,*.gif,*.png,*.jpeg。', dictFallbackMessage:'瀏覽器不受支持', dictFileTooBig:'文件過(guò)大上傳文件最大支持.', dictRemoveLinks: '刪除', dictCancelUpload: '取消', //對(duì)一些方法的后續(xù)處理 init:function(){ this.on('addedfile', function(file) {//上傳文件時(shí)觸發(fā)的事件document.querySelector(’div .dz-default’).style.display = ’none’; }); this.on('success',function(file,data){alert(data.data)//上傳成功觸發(fā)的事件console.log(’ok’); }); this.on('error',function (file,data) {//上傳失敗觸發(fā)的事件console.log(’fail’);var message = ’’;//lavarel框架有一個(gè)表單驗(yàn)證，//對(duì)于ajax請(qǐng)求，JSON 響應(yīng)會(huì)發(fā)送一個(gè) 422 HTTP 狀態(tài)碼，//對(duì)應(yīng)file.accepted的值是false，在這里捕捉表單驗(yàn)證的錯(cuò)誤提示if (file.accepted){ $.each(data,function (key,val) { message = message + val[0] + ’;’; }) //控制器層面的錯(cuò)誤提示，file.accepted = true的時(shí)候； alert(message);} }); this.on('removedfile',function(file){//刪除文件時(shí)觸發(fā)的方法(向后臺(tái)發(fā)送刪除文件請(qǐng)求){#$.post(’/admin/del/’+ file_id,{’_method’:’DELETE’},function (data) {#}{# console.log(’刪除結(jié)果:’+data.message);#}{#})#}document.querySelector(’div .dz-default’).style.display = ’block’; }); } });</script></body></html>
方法二中，很多參數(shù)是不一定需要定義的，參見方法一
3、后臺(tái)處理dropzone.js前端界面上傳的文件
A、django的settings.py 文件定義上傳文件夾：
#文件上傳文件夾定義ENROLLED_DATA = ’%s/statics/enrolled_data’ %BASE_DIR
B、對(duì)應(yīng)的view處理前端上傳過(guò)來(lái)的數(shù)據(jù)：
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請(qǐng)求 if not os.path.exists(ENROLLED_DATA): #如果settings定義的 上傳文件夾不存在os.makedirs(ENROLLED_DATA,exist_ok=True) #新建文件夾 for k,file_obj in request.FILES.items(): #獲取前端傳過(guò)來(lái)的文件數(shù)據(jù)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、上傳成功：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. python:刪除離群值操作(每一行為一類數(shù)據(jù))2. 使用ProcessBuilder調(diào)用外部命令，并返回大量結(jié)果3. 詳解Vue中Axios封裝API接口的思路及方法4. JSP實(shí)現(xiàn)客戶信息管理系統(tǒng)5. python中if嵌套命令實(shí)例講解6. python 批量下載bilibili視頻的gui程序7. python 通過(guò)exifread讀取照片信息8. 使用css實(shí)現(xiàn)全兼容tooltip提示框9. CSS自定義滾動(dòng)條樣式案例詳解10. python中HTMLParser模塊知識(shí)點(diǎn)總結(jié)
網(wǎng)公網(wǎng)安備