基于django和dropzone.js实现上传文件


Posted in Python onNovember 24, 2020

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实现上传文件

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Python 相关文章推荐
基于Python的身份证号码自动生成程序
Aug 15 Python
python进阶教程之函数对象(函数也是对象)
Aug 30 Python
Python读取word文本操作详解
Jan 22 Python
利用Python实现微信找房机器人实例教程
Mar 10 Python
Django 多环境配置详解
May 14 Python
python plotly绘制直方图实例详解
Jul 22 Python
Django 响应数据response的返回源码详解
Aug 06 Python
关于Python中的向量相加和numpy中的向量相加效率对比
Aug 26 Python
PyTorch中permute的用法详解
Dec 30 Python
python标准库sys和OS的函数使用方法与实例详解
Feb 12 Python
java关于string最常出现的面试题整理
Jan 18 Python
python基于tkinter制作m3u8视频下载工具
Apr 24 Python
Pycharm创建文件时自动生成文件头注释(自定义设置作者日期)
Nov 24 #Python
Django web自定义通用权限控制实现方法
Nov 24 #Python
记一次python 爬虫爬取深圳租房信息的过程及遇到的问题
Nov 24 #Python
Pycharm安装python库的方法
Nov 24 #Python
python opencv角点检测连线功能的实现代码
Nov 24 #Python
python+appium+yaml移动端自动化测试框架实现详解
Nov 24 #Python
Python利用myqr库创建自己的二维码
Nov 24 #Python
You might like
安健A254立体声随身听的分析与打磨
2021/03/02 无线电
常用的php ADODB使用方法集锦
2008/03/25 PHP
PHP OPCode缓存 APC详细介绍
2010/10/12 PHP
配置eAccelerator和XCache扩展来加速PHP程序的执行
2015/12/22 PHP
PHP绕过open_basedir限制操作文件的方法
2018/06/10 PHP
利用js对象弹出一个层
2008/03/26 Javascript
讨论javascript(一)工厂方式 js面象对象的定义方法
2009/12/15 Javascript
10个基于Jquery的幻灯片插件教程
2010/10/29 Javascript
jquery插件开发之实现jquery手风琴功能分享
2014/03/10 Javascript
Bootstarp风格的toggle效果分享
2016/02/23 Javascript
RequireJS简易绘图程序开发
2016/10/28 Javascript
让微信小程序支持ES6中Promise特性的方法详解
2017/06/13 Javascript
使用prop解决一个checkbox选中后再次选中失效的问题
2017/07/05 Javascript
js 判断一个数字是不是2的n次方幂的实例
2017/11/26 Javascript
vue-cli2打包前和打包后的css前缀不一致的问题解决
2018/08/24 Javascript
vue中各选项及钩子函数执行顺序详解
2018/08/25 Javascript
[10:04]国际邀请赛采访专栏:DK.Farseer,mouz.Black^,采访员Josh专访
2013/08/05 DOTA
[47:06]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第一局
2016/03/05 DOTA
基于python的字节编译详解
2017/09/20 Python
python之django母板页面的使用
2018/07/03 Python
Python wxpython模块响应鼠标拖动事件操作示例
2018/08/23 Python
Python3 安装PyQt5及exe打包图文教程
2019/01/08 Python
Python实现html转换为pdf报告(生成pdf报告)功能示例
2019/05/04 Python
python使用协程实现并发操作的方法详解
2019/12/27 Python
keras 自定义loss model.add_loss的使用详解
2020/06/22 Python
美国在线旅行社:Crystal Travel
2018/09/11 全球购物
方正Java笔试题
2014/07/03 面试题
航空学院求职信
2014/06/11 职场文书
关于运动会的广播稿50字
2014/10/17 职场文书
2015年高校保卫处工作总结
2015/07/23 职场文书
2016大一新生入学教育心得体会
2016/01/23 职场文书
技术转让协议书
2016/03/19 职场文书
2016年幼儿园教师师德承诺书
2016/03/25 职场文书
Python中OpenCV实现简单车牌字符切割
2021/06/11 Python
Python实现文字pdf转换图片pdf效果
2022/04/03 Python
Android存储中最基本的文件存储方式
2022/04/30 Java/Android