django + dropzone.js 上傳文件

時間 2020-05-25

標籤 django dropzone.js dropzone 上傳文件欄目 Python 简体版

原文原文鏈接

一、dropzone.jsjavascript

http://www.dropzonejs.com/css

dropzone.js是一個可預覽\可定製化的文件拖拽上傳，實現AJAX異步上傳文件的工具html

二、dropzone.js前端界面上傳方式前端

官網下載而且引入dropzone.js 和dropzone.css（http://www.dropzonejs.com/）以及引用jquery.js，定義一個class="dropzone"便可完成，java

代碼示例：jquery

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Flask upload with Dropzone example</title>
    <link rel="stylesheet" href="/static/css/dropzone.css" 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>

方法二中，不少參數是不必定須要定義的，參見方法一




三、後臺處理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、上傳成功：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。