基於django和dropzone.js實現上傳檔案

阿新 • • 發佈：2020-11-25

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="/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、上傳成功：

基於django和dropzone.js實現上傳檔案