圆月山庄资源网

基于django和dropzone.js实现上传文件
脚本专栏 2024/11/1 佚名
3 2
圆月山庄资源网 Design By www.vgjia.com

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="/UploadFiles/2021-04-08/jquery-3.3.1.js">


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


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
标签：
django,dropzone.js,上传文件
圆月山庄资源网 Design By www.vgjia.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
圆月山庄资源网 Design By www.vgjia.com
www.vgjia.com 圆月山庄资源网
139,976互联网资源
144,792高清电影
21,817无损音乐
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接