首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

使用Dropzone.js上传的示例代码

Posted in Javascript onOctober 10, 2017

本文介绍了使用Dropzone.js上传的示例代码，分享给大家，具体如下：

说明：后台用的python的flask框架，后台对你理解这篇文章没什么影响，你可以使用php

form作为上传区

引入Dropzone.js和dropzone.css然后使用表单form定义一个class=”dropzone”即可完成

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Flask upload with Dropzone example</title>
  <link rel="stylesheet" href="{{ url_for('static', filename='dropzone.css') }}" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" type="text/css" />
  <script src="{{ url_for('static', filename='jquery.js') }}"></script>
  <script src="{{ url_for('static', filename='dropzone.js') }}"></script>
</head>
<body>
<!-- 第一种上传 -->    
  <form id ="myAwesomeDropzone" action="{{ url_for('upload_file') }}" class="dropzone" method="POST" enctype="multipart/form-data"></form>
<!-- 第一种上传 --> 
</body>
</html>

效果

使用Dropzone.js上传的示例代码 

div作为上传区

div作为上传区也很简单

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Flask upload with Dropzone example</title>
  <link rel="stylesheet" href="{{ url_for('static', filename='dropzone.css') }}" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" type="text/css" />
  <script src="{{ url_for('static', filename='jquery.js') }}"></script>
  <script src="{{ url_for('static', filename='dropzone.js') }}"></script>
</head>
<body>
<div id="myId" class="dropzone" style="width: 800px; height: 300px;">点我上传</div>
<script type="text/javascript">
    //下面两行是js和jquery的方式实现绑定div的例子，你选择一种即可
    //var myDropzone = new Dropzone("#myId", { url: "{{ url_for('upload_file') }}" });
    $("#myId").dropzone({ url: "{{ url_for('upload_file') }}" });
   </script>
   
</body>
</html>

效果

使用Dropzone.js上传的示例代码 

form作为上传区配置

配置也分为两种，如果使用的form表单上传的就用如下方式配置

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Flask upload with Dropzone example</title>
  <link rel="stylesheet" href="{{ url_for('static', filename='dropzone.css') }}" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" type="text/css" />
  <script src="{{ url_for('static', filename='jquery.js') }}"></script>
  <script src="{{ url_for('static', filename='dropzone.js') }}"></script>
</head>
<body>
  <form id ="myAwesomeDropzone" action="{{ url_for('upload_file') }}" class="dropzone" method="POST" enctype="multipart/form-data">    
    <div class="fallback">
      <input name="file" type="file" multiple />
    </div> 
  </form>
<script type="text/javascript">
//两种配置方式，第一种，表单上传时的配置方式，可以打开form表单的注释，myAwesomeDropzone是表单的id
  Dropzone.options.myAwesomeDropzone = {
     paramName: "file", // The name that will be used to transfer the file
     maxFilesize: 2, // MB
     accept: function(file, done) {
      if (file.name != "justinbieber.jpg") {
         done("Naha, you don't.");
      }else { 
        done();
      }
    }
   };
</script>
   
</body>
</html>

效果

使用Dropzone.js上传的示例代码 

div作为上传区配置

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Flask upload with Dropzone example</title>
  <link rel="stylesheet" href="{{ url_for('static', filename='dropzone.css') }}" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" type="text/css" />
  <script src="{{ url_for('static', filename='jquery.js') }}"></script>
  <script src="{{ url_for('static', filename='dropzone.js') }}"></script>
</head>
<body>
 <div id="myId" class="dropzone" style="width: 800px; height: 300px;">点我上传</div>
<script type="text/javascript">
    //第二种配置，这种使用的是div做上传区域时使用的配置
    Dropzone.autoDiscover = false;//不知道该行有什么用，欢迎高手下方评论解答
    $("#myId").dropzone({ 
    url: "{{ url_for('upload_file') }}",
    addRemoveLinks: true,    
    method: 'post',
    filesizeBase: 1024    
    });
</script>
   
</body>
</html>

说明：关于其他的配置请看最后的链接

主题

第一种

<!DOCTYPE html>
<html>
<head>
 <meta charset=="utf-8">
 <!-- Latest compiled and minified CSS -->
 <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="external nofollow" >
 <!-- Optional theme -->
 <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css" rel="external nofollow" >
 <script src="{{ url_for('static', filename='jquery.js') }}"></script>
 <script src="{{ url_for('static', filename='dropzone.js') }}"></script>
 <script>
  Dropzone.autoDiscover = false;
 </script>
 <style>
  html, body {
   height: 100%;
  }
  #actions {
   margin: 2em 0;
  }
  /* Mimic table appearance */
  div.table {
   display: table;
  }
  div.table .file-row {
   display: table-row;
  }
  div.table .file-row > div {
   display: table-cell;
   vertical-align: top;
   border-top: 1px solid #ddd;
   padding: 8px;
  }
  div.table .file-row:nth-child(odd) {
   background: #f9f9f9;
  }
  /* The total progress gets shown by event listeners */
  #total-progress {
   opacity: 0;
   transition: opacity 0.3s linear;
  }
  /* Hide the progress bar when finished */
  #previews .file-row.dz-success .progress {
   opacity: 0;
   transition: opacity 0.3s linear;
  }
  /* Hide the delete button initially */
  #previews .file-row .delete {
   display: none;
  }
  /* Hide the start and cancel buttons and show the delete button */
  #previews .file-row.dz-success .start,
  #previews .file-row.dz-success .cancel {
   display: none;
  }
  #previews .file-row.dz-success .delete {
   display: block;
  }
 </style>
</head>
<body>
 
 <div class="container" id="container">
  <h2 class="lead">Configuration Demo</h2>
  <div id="actions" class="row">
   <div class="col-lg-7">
    <!-- 控制总体的三个按钮 -->
    <span class="btn btn-success fileinput-button">
      <i class="glyphicon glyphicon-plus"></i>
      <span>Add files...</span>
    </span>
    <button type="submit" class="btn btn-primary start">
      <i class="glyphicon glyphicon-upload"></i>
      <span>Start upload</span>
    </button>
    <button type="reset" class="btn btn-warning cancel">
      <i class="glyphicon glyphicon-ban-circle"></i>
      <span>Cancel upload</span>
    </button>
   </div>
   <div class="col-lg-5">
    <!-- 总体的进度 -->
    <span class="fileupload-process">
     <div id="total-progress" class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
      <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
     </div>
    </span>
   </div>
  </div>
  <!--
  data-dz-thumbnail：使用后代表该标签是存放缩略图的标签【这里必须是一个 <img /> 元素 ，并且alt 和 src 属性将被 Dropzone改变】
  data-dz-name：存放文件名
  data-dz-errormessage：存放错误信息
  data-dz-size：存放文件大小
  data-dz-remove ：删除队列中的文件，或者取消正在从队列上传到服务器的文件
  data-dz-uploadprogress：上传进度【( 当这里有一个 uploadprogress事件时， Dropzone 将更改 style.width 属性从 0% 到 100% )】
  -->
  
  <div class="table table-striped files" id="previews">
   <div id="template" class="file-row">
    <div>
      <span class="preview"><img data-dz-thumbnail /></span>
    </div>
    <div>
      <p class="name" data-dz-name ></p>
      <strong class="error text-danger" data-dz-errormessage></strong>
    </div>
    <div>
      <p class="size" data-dz-size></p>
      <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
        <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
      </div>
    </div>
    <div>
     <button class="btn btn-primary start">
       <i class="glyphicon glyphicon-upload"></i>
       <span>Start</span>
     </button>
     <button data-dz-remove class="btn btn-warning cancel">
       <i class="glyphicon glyphicon-ban-circle"></i>
       <span>Cancel</span>
     </button>
     <button data-dz-remove class="btn btn-danger delete">
      <i class="glyphicon glyphicon-trash"></i>
      <span>Delete</span>
     </button>
    </div>
   </div>
  </div>
<script>
   // Get the template HTML and remove it from the doument
   var previewNode = document.querySelector("#template");
   previewNode.id = "";
   var previewTemplate = previewNode.parentNode.innerHTML;
   //开始先删除单个文件的布局
   previewNode.parentNode.removeChild(previewNode);
   var myDropzone = new Dropzone(document.body, { // 指定拖拽区为body
    url: "{{ url_for('upload_file') }}", // Set the url
    thumbnailWidth: 80,
    thumbnailHeight: 80,
    parallelUploads: 20,
    previewTemplate: previewTemplate,
    autoQueue: false, // 当队列有文件，是否立刻自动上传到服务器
    previewsContainer: "#previews", // 指定存放文件队列区
    clickable: ".fileinput-button" // 点击某个按钮或区域后出现选择电脑中本地图片，默认是previewsContainer指定的区域
   });
   myDropzone.on("addedfile", function(file) {
    // 让模版中的单个文件可以点击上传
    file.previewElement.querySelector(".start").onclick = function() { myDropzone.enqueueFile(file); };
   });
   // 显示所有文件整体上传进度1-100
   myDropzone.on("totaluploadprogress", function(progress) {
    document.querySelector("#total-progress .progress-bar").style.width = progress + "%";
   });
   
   myDropzone.on("sending", function(file) {
    // 显示整体的上传的进度条，说明：原来是0，所以上面的style.width = progress + "%"即使是100%也看不到
    document.querySelector("#total-progress").style.opacity = "1";
    // 失效上传按钮
    file.previewElement.querySelector(".start").setAttribute("disabled", "disabled");
   });
   // 当没有文件上传时，隐藏进度条
   myDropzone.on("queuecomplete", function(progress) {
    document.querySelector("#total-progress").style.opacity = "0";
   });
   // 上传所有
   document.querySelector("#actions .start").onclick = function() {
     myDropzone.enqueueFiles(myDropzone.getAcceptedFiles());
    //myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED));与上面一样，可查看源码对比
   };
   //取消所有 
   document.querySelector("#actions .cancel").onclick = function() {
    myDropzone.removeAllFiles(true);
   };
</script>
</body>
</html>

第二种效果与默认的一样

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Flask upload with Dropzone example</title>
  <link rel="stylesheet" href="{{ url_for('static', filename='dropzone.css') }}" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" type="text/css" />
  <script src="{{ url_for('static', filename='jquery.js') }}"></script>
  <script src="{{ url_for('static', filename='dropzone.js') }}"></script>
</head>
<body>
<div id="myId" class="dropzone" style="width: 500px; height: 300px;"></div>
<div id="aaa"></div>
<div id="preview-template" style="display: none;">
  <div class="dz-preview dz-file-preview ">
    <div class="dz-image"><img data-dz-thumbnail /></div>
    <div class="dz-details">
      <div class="dz-filename"><span data-dz-name></span></div>
      <div class="dz-size" data-dz-size></div>
    </div>
    <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
    <div class="dz-success-mark"><span>✔</span></div>
    <div class="dz-error-mark"><span>✘</span></div>
    <div class="dz-error-message"><span data-dz-errormessage></span></div>
  </div>
</div>
   <script type="text/javascript">
   
    Dropzone.autoDiscover = false;//解决两次实例Dropzone错误，可在控制台看到该错误
    $("#myId").dropzone({ 
    url: "{{ url_for('upload_file') }}",
    addRemoveLinks: true,    
    method: 'post',
    filesizeBase: 1024,
    previewTemplate: $('#preview-template').html(),//如果去掉该选项就会使用默认的
    autoQueue: true,
    init: function() {
        this.on("addedfile", function(file) {
          $(".start").click (function() { 
          this.enqueueFile(file);    
          })    
        });
      }
    }); 
  
   </script>
   
</body>
</html>

demo文件

如果是flask框架可进行测试点击此处下载，如果是php或者其他就看看不必下载

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

使用Dropzone.js上传的示例代码

- Author -

年轻时代

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JQuery筛选器全系列介绍
Aug 27 Javascript
jquery的map与get方法详解
Nov 04 Javascript
Jquery插件仿百度搜索关键字自动匹配功能
May 11 Javascript
JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序
Jan 25 Javascript
JS库之ParticlesJS使用简介
Sep 12 Javascript
详解jQuery中的easyui
Sep 02 jQuery
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
Sep 11 Javascript
vue h5移动端禁止缩放代码
Oct 28 Javascript
vue+koa2搭建mock数据环境的详细教程
May 18 Javascript
vue单文件组件无法获取$refs的问题
Jun 24 Javascript
Vue + Element-ui的下拉框el-select获取额外参数详解
Aug 14 Javascript
原生微信小程序开发中 redux 的使用详解
Feb 18 Javascript
React中上传图片到七牛的示例代码
Oct 10 #Javascript
基于对象合并功能的实现示例
Oct 10 #Javascript
聊聊Vue.js的template编译的问题
Oct 09 #Javascript
Vue组件之全局组件与局部组件的使用详解
Oct 09 #Javascript
Angular2监听页面大小变化的解决方法
Oct 09 #Javascript
JS实现预加载视频音频/视频获取截图（返回canvas截图）
Oct 09 #Javascript
input 标签实现输入框带提示文字效果(两种方法)
Oct 09 #Javascript
Debian(1) 蓝屏(1) RustDesk(1) 鸿蒙(2) win7(2) 虚拟键盘(1) 输入法(2) 声卡驱动(1) 滚动条(1) 鸿蒙3.0(1)
You might like
改进的IP计数器
2006/10/09 PHP
解析PHP无限级分类方法及代码
2013/06/21 PHP
PHP 自动加载的简单实现(推荐)
2016/08/12 PHP
php文件后缀不强制为.php的实操方法
2019/09/18 PHP
指定js可访问其它域名的cookie的方法
2007/09/18 Javascript
仅Firefox中链接A无法实现模拟点击以触发其默认行为
2011/07/31 Javascript
简单实现node.js图片上传
2016/12/18 Javascript
深入理解vue中的$set
2017/06/01 Javascript
JavaScript原型继承_动力节点Java学院整理
2017/06/30 Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
2019/01/22 Javascript
JS回调函数深入理解
2019/10/16 Javascript
Node.js开发之套接字(socket)编程入门示例
2019/11/05 Javascript
vue项目强制清除页面缓存的例子
2019/11/06 Javascript
基于原生js实现九宫格算法代码实例
2020/07/03 Javascript
Vue自动构建发布脚本的方法示例
2020/07/24 Javascript
NodeJS开发人员常见五个错误理解
2020/10/14 NodeJs
Python正则表达式教程之二：捕获篇
2017/03/02 Python
python+tkinter编写电脑桌面放大镜程序实例代码
2018/01/16 Python
Python装饰器用法实例总结
2018/02/07 Python
PyTorch线性回归和逻辑回归实战示例
2018/05/22 Python
Python并发:多线程与多进程的详解
2019/01/24 Python
Python进阶之@property动态属性的实现
2019/04/01 Python
Python上下文管理器用法及实例解析
2019/11/11 Python
python GUI库图形界面开发之PyQt5 Qt Designer工具(Qt设计师)详细使用方法及Designer ui文件转py文件方法
2020/02/26 Python
python实现将range()函数生成的数字存储在一个列表中
2020/04/02 Python
在服务器上安装python3.8.2环境的教程详解
2020/04/26 Python
python中shell执行知识点
2020/05/06 Python
在pycharm中debug 实时查看数据操作(交互式)
2020/06/09 Python
百思买美国官网：Best Buy
2016/07/28 全球购物
联想智利官方网站：Lenovo Chile
2020/06/03 全球购物
信息部岗位职责
2013/11/12 职场文书
科长个人四风问题整改措施思想汇报
2014/10/13 职场文书
校运会广播稿
2015/08/19 职场文书
使用CSS3实现按钮悬停闪烁动态特效代码
2021/08/30 HTML / CSS
Python爬虫入门案例之爬取二手房源数据
2021/10/16 Python
MySQL表类型 存储引擎 的选择
2021/11/11 MySQL