首页
所有分类
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 相关文章推荐
Javascript操纵Cookie实现购物车程序
Feb 15 Javascript
JavaScript与C# Windows应用程序交互方法
Jun 29 Javascript
用javascript实现计算两个日期的间隔天数
Aug 14 Javascript
JavaScript的parseInt 进制问题
May 07 Javascript
js函数在frame中的相互调用详解
Mar 03 Javascript
js获取url中&quot;?&quot;后面的字串方法
May 15 Javascript
JavaScript中的闭包介绍
Mar 15 Javascript
node使用Koa2搭建web项目的方法
Oct 17 Javascript
vue组件父子间通信详解（三）
Nov 07 Javascript
解决vue-cli + webpack 新建项目出错的问题
Mar 20 Javascript
jQuery实现移动端图片上传预览组件的方法分析
May 01 jQuery
Vue项目打包编译优化方案
Sep 16 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
矿石收音机(1) 军机(1) 沃尔沃(1) ETON(1) E1-XM(1) VOLVO(1) DSP(2) R601SW(1) S900(1) 放大器(1)
You might like
PHP+.htaccess实现全站静态HTML文件GZIP压缩传输(一)
2007/02/15 PHP
php遍历文件夹下的所有文件和子文件夹示例
2014/03/20 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
js页面跳转常用的几种方式
2010/11/25 Javascript
jQuery + Flex 通过拖拽方式动态改变图片的代码
2011/08/03 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
2014/10/28 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
2015/09/21 Javascript
angular-ui-sortable实现可拖拽排序列表
2016/12/28 Javascript
Bootstrap表单制作代码
2017/03/17 Javascript
浅谈JavaScript中的属性:如何遍历属性
2017/09/14 Javascript
详解Node全局变量global模块
2017/09/28 Javascript
基于vue2.0动态组件及render详解
2018/03/17 Javascript
JS实现对json对象排序并删除id相同项功能示例
2018/04/18 Javascript
详解微信小程序缓存--缓存时效性
2019/05/02 Javascript
微信小程序实现原生步骤条
2019/07/25 Javascript
vue+elementUI实现图片上传功能
2019/08/20 Javascript
Javascript call及apply应用场景及实例
2020/08/26 Javascript
Windows下安装python2.7及科学计算套装
2015/03/05 Python
Python如何快速实现分布式任务
2017/07/06 Python
基于DATAFRAME中元素的读取与修改方法
2018/06/08 Python
Python语法分析之字符串格式化
2019/06/13 Python
django数据模型on_delete, db_constraint的使用详解
2019/12/24 Python
Python学习之路安装pycharm的教程详解
2020/06/17 Python
详解python中的异常捕获
2020/12/15 Python
有关HTML5中背景音乐的自动播放功能
2017/10/16 HTML / CSS
NEW LOOK官网：英国时装零售巨头之一，快时尚品牌
2017/01/11 全球购物
香港卓悦化妆品官网：BONJOUR
2017/09/21 全球购物
viagogo波兰票务平台：演唱会、体育比赛、戏剧门票
2018/04/23 全球购物
2014年应届大学生毕业自我鉴定
2014/01/31 职场文书
企业法人授权委托书
2014/04/03 职场文书
党员干部反四风对照检查材料思想汇报
2014/09/14 职场文书
建筑工地文明标语
2014/10/09 职场文书
骨干教师考核评语
2014/12/31 职场文书
Golang Gob编码(gob包的使用详解)
2021/05/07 Golang
苹果的回收机器人可以通过拆解iPhone获取大量的金和铜并外公布了环境保护最新进展
2022/04/21 数码科技
CSS子盒子水平和垂直居中的五种方法
2022/07/23 HTML / CSS