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" 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 上传文件的更多相关文章
	

    
								
  1. 使用ajaxfileupload.js上传文件
		
    一直以来上传文件都是使用form表单上传文件,也看到过有人使用js上传文件,不过看起来蛮简单的也就没有怎么去理会.今天突然要使用这种方式上传文件,期间还遇到点问题.因此就记录下来,方便以后遇到这样的问 ...
    
		
    2. 
						
  2. js 上传文件后缀名的判断  var flag=false;应用
		
    js 上传文件后缀名的判断  var flag=false;应用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...
    
		
    3. 
						
  3. django实现分片上传文件
		
    目标:利用django实现上传文件功能 1,先设置路由系统 urls.py from django.conf.urls import url,include from django.contrib i ...
    
		
    4. 
						
  4. Django之用户上传文件的参数配置
		
    Django之用户上传文件的参数配置 models.py文件 class Xxoo(models.Model): title = models.CharField(max_length=128) #  ...
    
		
    5. 
						
  5. js上传文件带参数，并且，返回给前台文件路径，解析上传的xml文件，存储到数据库中
		
    ajaxfileupload.js jQuery.extend({ createUploadIframe: function(id, uri) { //create frame var frameId ...
    
		
    6. 
						
  6. atitit.javascript js 上传文件的本地预览
		
    atitit.javascript js 上传文件的本地预览 1. .URL.createObjectURL  1 1.1. 吊销所有使用 URL.createObjectURL 而创建的 URL,以 ...
    
		
    7. 
						
  7. Django session cookie  上传文件、详解
		
    session 在这里先说session 配置URL from django.conf.urls import patterns, include, url from django.contrib i ...
    
		
    8. 
						
  8. 前端js上传文件 到后端接收文件
		
    下面是前端js代码: <html> <head> <meta http-equiv="Content-Type" content="text ...
    
		
    9. 
						
  9. 纯js上传文件   很好用
		
    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. [BZOJ4920][Lydsy六月月赛]薄饼切割
			
    [BZOJ4920][Lydsy六月月赛]薄饼切割 试题描述 有一天,tangjz 送给了 quailty 一张薄饼,tangjz 将它放在了水平桌面上,从上面看下去,薄饼形成了一个 \(H \tim ...
    
			
    2. 
						
  2. BZOJ 4710  [Jsoi2011]分特产 解题报告
			
    4710 [Jsoi2011]分特产 题意 给定\(n\)个集合,每个集合有相同的\(a_i\)个元素,不同的集合的元素不同.将所有的元素分给\(m\)个不同位置,要求每个位置至少有一个元素,求分配方 ...
    
			
    3. 
						
  3. 洛谷 P2168 [NOI2015]荷马史诗 解题报告
			
    P2168 [NOI2015]荷马史诗 题目描述 追逐影子的人,自己就是影子 --荷马 Allison 最近迷上了文学.她喜欢在一个慵懒的午后,细细地品上一杯卡布奇诺,静静地阅读她爱不释手的<荷 ...
    
			
    4. 
						
  4. dhcp 和ntpdate时间同步
			
    为了防止路由器的dhcp服务干扰实验,我们2台机器分别新加了1快网卡. vmnet4 dhcp安装 [root@ygy130 ~]# yum -y install dhcp 将配置文件放在/etc/d ...
    
			
    5. 
						
  5. [NOI2002] 银河英雄传说 (带权并查集)
			
    题目描述 公元五八○一年,地球居民迁至金牛座α第二行星,在那里发表银河联邦创立宣言,同年改元为宇宙历元年,并开始向银河系深处拓展. 宇宙历七九九年,银河系的两大军事集团在巴米利恩星域爆发战争.泰山压顶 ...
    
			
    6. 
						
  6. 在eclipse中从gitlab上面下载项目
			
    (1)在eclipse中 import --git--uri--输入用户名密码,下载,这个时候是在本地建立了一个本地仓库 (2)把仓库中的项目导入到eclipse的工作空间中. (3)将所需要的项目转 ...
    
			
    7. 
						
  7. 封装getByClass（JS获取class的方法封装为一个函数）
			
    获取方法一(普通版) 获取单一的class: function getByClass(oParent, sClass) {//两个形参,第一个对象oParent 第二个样式名class var aEl ...
    
			
    8. 
						
  8. JRE集成到Tomcat
			
    将jdk集成到tomcat里面(不用客户安装JRE) 或者 tomcat使用指定的jdk_ 给客户安装软件的时候,也许客户不想你在人家机器的环境变量里设置来设置去,那么就要在tomcat里指定要使用的 ...
    
			
    9. 
						
  9. lesson 4 再谈继承多态，抽象类和接口
			
    再谈多态,抽象类和接口 上一次博客已经概念性的概述了继承多态,抽象类和接口,这次来具体的谈一谈他们之间的联系和需要注意的地方. 一.继承和多态:Inheritance (继承) & Polym ...
    
			
    10. 
						
  10. Go 实现 soundex 算法
			
    [转]http://www.syyong.com/Go/Go-implements-the-soundex-algorithm.html SOUNDEX 返回由四个字符组成的代码 (SOUNDEX)  ...
    
			
    11.