基于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 struct.unpack
Sep 06 Python
Python使用当前时间、随机数产生一个唯一数字的方法
Sep 18 Python
python中requests和https使用简单示例
Jan 18 Python
使用sklearn进行对数据标准化、归一化以及将数据还原的方法
Jul 11 Python
Python线程同步的实现代码
Oct 03 Python
在macOS上搭建python环境的实现方法
Aug 13 Python
python 使用while写猜年龄小游戏过程解析
Oct 07 Python
Python如何将图像音视频等资源文件隐藏在代码中(小技巧)
Feb 16 Python
python实现逢七拍腿小游戏的思路详解
May 26 Python
python不到50行代码完成了多张excel合并的实现示例
May 28 Python
基于python实现生成指定大小txt文档
Jul 20 Python
python Gabor滤波器讲解
Oct 26 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
php循环输出数据库内容的代码
2008/05/24 PHP
Erlang的运算符(比较运算符,数值运算符,移位运算符,逻辑运算符)
2012/07/23 PHP
php小技巧之过滤ascii控制字符
2014/05/14 PHP
跨浏览器PHP下载文件名中的中文乱码问题解决方法
2015/03/05 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
Confirmer JQuery确认对话框组件
2010/06/09 Javascript
javascript 原型链维护和继承详解
2014/11/26 Javascript
JavaScript生成的动态下雨背景效果实现方法
2015/02/25 Javascript
jQuery控制网页打印指定区域的方法
2015/04/07 Javascript
Spring mvc 接收json对象
2015/12/10 Javascript
基于Three.js插件制作360度全景图
2016/11/29 Javascript
解决AngualrJS页面刷新导致异常显示问题
2017/04/20 Javascript
浅谈JS如何实现真正的对象常量
2017/06/25 Javascript
vue调试工具vue-devtools安装及使用方法
2018/11/07 Javascript
基于React Native 0.52实现轮播图效果
2020/08/25 Javascript
详解vue项目打包步骤
2019/03/29 Javascript
轻松学习JavaScript函数中的 Rest 参数
2019/05/30 Javascript
在vue中对数组值变化的监听与重新响应渲染操作
2020/07/17 Javascript
Vue绑定用户接口实现代码示例
2020/11/04 Javascript
[01:35:53]完美世界DOTA2联赛PWL S3 Magma vs GXR 第二场 12.13
2020/12/17 DOTA
一个超级简单的python web程序
2014/09/11 Python
Python Web框架Flask信号机制(signals)介绍
2015/01/01 Python
使用Python装饰器在Django框架下去除冗余代码的教程
2015/04/16 Python
Python中遍历字典过程中更改元素导致异常的解决方法
2016/05/12 Python
Python的matplotlib绘图如何修改背景颜色的实现
2019/07/16 Python
解析浏览器的一些“滚动”行为鉴赏
2019/09/16 HTML / CSS
iPad和Surface Pro蓝牙键盘:Brydge
2018/11/10 全球购物
飞利浦美国官网:Philips美国
2020/02/28 全球购物
保护动物的标语
2014/06/11 职场文书
政风行风评议个人心得体会
2014/10/29 职场文书
2015年收银员个人工作总结
2015/04/01 职场文书
工作简报范文
2015/07/21 职场文书
教师外出学习心得体会
2016/01/18 职场文书
大学生村官驻村工作心得体会
2016/01/23 职场文书
MySQL中存储时间的最佳实践指南
2021/07/01 MySQL