当前位置: 首页 > 编程笔记 >

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

芮叶秋
2023-03-14
本文向大家介绍基于django和dropzone.js实现上传文件,包括了基于django和dropzone.js实现上传文件的使用技巧和注意事项,需要的朋友参考一下

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、上传成功:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍基于Spring实现文件上传功能,包括了基于Spring实现文件上传功能的使用技巧和注意事项,需要的朋友参考一下 本小节你将建立一个可以接受HTTP multi-part 文件的服务。 你将建立一个后台服务来接收文件以及前台页面来上传文件。 要利用servlet容器上传文件,你要注册一个MultipartConfigElement类,以往需要在web.xml 中配置<multipar

  • 问题内容: 我使用了以下代码,图像已被删除,但缩略图仍然显示。 问题答案: 要删除缩略图,您必须启用addRemoveLinks:true,并在dropzonejs中使用“ removedfile”选项 removefile:每当从列表中删除文件时调用。您可以听一下,并根据需要从服务器中删除文件。 我还添加了一个ajax调用,用于删除脚本,它看起来像这样: 它对我有效,因此希望对您有所帮助。

  • 本文向大家介绍Dropzone.js实现文件拖拽上传功能(附源码下载),包括了Dropzone.js实现文件拖拽上传功能(附源码下载)的使用技巧和注意事项,需要的朋友参考一下 dropzone.js是一个开源的JavaScript库,提供 AJAX 异步文件上传功能,支持拖拽文件、支持最大文件大小、支持设置文件类型、支持预览上传结果,不依赖jQuery库。 效果演示      源码下载 使用Dro

  • 本文向大家介绍python+django快速实现文件上传,包括了python+django快速实现文件上传的使用技巧和注意事项,需要的朋友参考一下 对于web开来说,用户登陆、注册、文件上传等是最基础的功能,针对不同的web框架,相关的文章非常多,但搜索之后发现大多都不具有完整性,对于想学习web开发的新手来说就没办法一步一步的操作练习;对于web应用来说,包括数据库的创建,前端页面的开发,以及中

  • 本文向大家介绍基于python实现上传文件到OSS代码实例,包括了基于python实现上传文件到OSS代码实例的使用技巧和注意事项,需要的朋友参考一下 基础环境 小文件上传 分片上传 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍基于ajax html实现文件上传技巧总结,包括了基于ajax html实现文件上传技巧总结的使用技巧和注意事项,需要的朋友参考一下 引语:大家都知道,html中上传文件就一个input,type=file就搞定了。但是,这个标签的样式,实在不值得提点什么,要改动他的样式,恐怕也是较难的。但是其实挺简单,今天就来说说上传文件小技巧吧! 1. 怎样自定义样式? 1)、只管按照自己喜欢看