html:

  1. <div class="field">
  2.   <div id="file" class="dropzone">
  3.     <div class="dz-message needsclick">
  4.       <font><font>Drop files here or click to upload.</font></font><br>
  5.       <span class="note needsclick">(Select the files you want to upload.)</span>
  6.     </div>
  7.   </div>
  8. </div>

css:

  1. .field{
  2.   max-width:720px;
  3.   margin: auto;
  4.   margin-top:60px;
  5.   font-size:20px;
  6.   .dropzone{
  7.     padding: 54px 54px;
  8.     .dz-message{
  9.       height:84px;
  10.       font{
  11.         line-height:28px;
  12.       }
  13.       span.note{
  14.         height:28px;
  15.         margin-top:28px;
  16.         font-size:15px;
  17.       }
  18.  
  19.     }
  20.   }
  21. }

js:

  1. Dropzone.autoDiscover = false;
  2. var dropz = new Dropzone("#file", {
  3.  
  4. url: "uploadFile", //上传文件的接口
  5.  
  6.    parallelUploads:,//并行处理多少个文件上传
  7.    uploadMultiple:true,//允许dropzone一次提交多个文件
  8.    maxFiles: ,//最大可上传的文件个数
  9.    maxFilesize: ,//MB
  10.    acceptedFiles: ".csv", //可接受的文件类型
  11.    success:function(file,data){
  12.      // console.log(this.getAcceptedFiles().length);//获取上传的文件总数
  13.      data=JSON.parse(data);
  14.      if(data.code==''){
  15.       //成功
  16.      }else{
  17.      }
  18.    },
  19.    dictMaxFilesExceeded:"文件数量过多",
  20.    dictDefaultMessage:"Drop files here or click to upload.",
  21.    dictFileTooBig:"可添加的最大文件大小为{{maxFilesize}}Mb,当前文件大小为{{filesize}}Mb ",
  22. })

dropzone需要注意的一点就是:

  打开文件的那一刻,就已经开始上传了

官网地址:http://www.dropzonejs.com/

上传文件插件dropzone的实例的更多相关文章

  1. Uploadify 上传文件插件详解

    Uploadify 上传文件插件详解 Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中 ...

  2. 项目一:第四天 1、快递员的条件分页查询-noSession,条件查询 2、快递员删除(逻辑删除) 3、基于Apache POI实现批量导入区域数据 a)Jquery OCUpload上传文件插件使用 b)Apache POI读取excel文件数据

    1. 快递员的条件分页查询-noSession,条件查询 2. 快递员删除(逻辑删除) 3. 基于Apache POI实现批量导入区域数据 a) Jquery OCUpload上传文件插件使用 b) ...

  3. 使用 jquery 的 上传文件插件 uploadify 3.1 配合 java 来做一个简单的文件上次功能。并且在界面上有radio 的选择内容也要上传

    使用 jquery 的 上传文件插件 uploadify 3.1 配合 java 来做一个简单的文件上次功能.并且在界面上有radio 的选择内容也要上传 uploadify 插件的 下载和文档地址  ...

  4. uploadify 上传文件插件

    今天在项目中要用到文件上传功能时,想借助Jquery方式来实现,于是想到用uploadify插件来实现.不经意间在网上看到了一遍关于这个插件的用法,写的很好.在这里就分享给大家,希望对大家有帮助.以下 ...

  5. Ajax 无刷新上传文件插件 uploadify 的使用

    在表单中无法直接使用 Ajax 上传文件,解决的思路可以是使用插件无刷新地上传文件,返回文件上传后的地址,然后把该地址作为 Ajax 的参数传递给服务器端进行数据库处理.可以使用 uploadify ...

  6. 【Bootstrap】bootstrap-fileinput上传文件插件

    [bootstrap-fileinput] 这是个据传最好用的bootstrap相关联的文件上传控件,支持拖曳上传,多线程上传,上传文件预览等等功能. 首先还是说一下要引入的一些文件: <lin ...

  7. php 应用 bootstrap-fileinput 上传文件 插件 操作的方法

    //先加载插件所需要的 js .css 文件 <link href="css/fileinput.css" rel="stylesheet" type=& ...

  8. Xshell拖拽上传文件插件

    lrzsz是一款在linux里可代替ftp上传和下载的程序.在linux中支持直接拖拽上传的插件:同时也支持rz和sz进行命令上传和下载. 插件安装 yum -y install lrzsz 上传(r ...

  9. jQuery 自制上传头像插件-附带Demo实例(ajaxfileupload.js第三弹)

    这篇文章主要是对前两篇关于ajaxfileupload.js插件的文章 <ASP.NET 使用ajaxfileupload.js插件出现上传较大文件失败的解决方法(ajaxfileupload. ...

随机推荐

  1. java中的自动转型的学习理解

    java当中的继承是和c++中的继承类似,只是java中的继承时的父类只能有一位. 我们今天在这里讲的是关于java中的自动转型的理解:顾名思义,自动转型值得就是使用时自动的将自身的类型进行转化. 自 ...

  2. Python 面向对象 (进阶篇)

    <Python 面向对象(初级篇)>文章介绍了面向对象基本知识: 面向对象是一种编程方式,此编程方式的实现是基于对 类 和 对象 的使用 类 是一个模板,模板中包装了多个“函数”供使用(可 ...

  3. PL/SQL批处理语句(一)BULK COLLECT

    我们知道PL/SQL程序中运行SQL语句是存在开销的,因为SQL语句是要提交给SQL引擎处理,这种在PL/SQL引擎和SQL引擎之间的控制转移叫做上下文却换,每次却换时,都有额外的开销.然而,FORA ...

  4. day17-jdbc 3.jdbc快速入门

    通过java程序操作数据库. 对数据库操作是对记录的操作.记录就是DML和DCL. 只要Java程序跟任何设备进行了连接,用完之后必须释放资源.最简单基础班讲I/O流,Java跟文件进行了连接,用完之 ...

  5. 【总结整理】js获取css的属性(内部,外部,内嵌(写在tag中))

    在JS中需要获取某个元素的宽高或者是绝对定位的位置信息,通常我们会这么写: var elemWidth = elem.style.width; console.log(elemWidth); //(空 ...

  6. array_unique() 函数移除数组中的重复的值

    array_unique() 函数移除数组中的重复的值,并返回结果数组. 当几个数组元素的值相等时,只保留第一个元素,其他的元素被删除. 返回的数组中键名不变.

  7. UIActionSheet(操作列表)

    #import "AppDelegate.h" @interface AppDelegate ()<UIActionSheetDelegate> @end @imple ...

  8. Configuration File (php.ini) Path Loaded Configuration File 都有加载php.ini文件,有什么不同的地方?

    Configuration File (php.ini) Path /usr/local/php7/etc      这个目录下面也有php.ini文件(如果在编译./configure -with- ...

  9. 在Linux里安装jdk

    一.系统环境说明: [操作系统]:Ubuntu 18.04.1 Desktop [JDK]:jdk1.8.0_181,文件名称:jdk-8u181-linux-x64.tar 二.准备jdk文件 下载 ...

  10. 利用General框架进行三层架构开发

    三层架构是企业信息管理系统中一种比较流行的架构方式,如大家所知,三层架构将信息系统分为数据访问层(DAL).业务逻辑层(BLL).界面表示层(UI)三部分,三层架构的好处是根据系统中代码所处的层次将系 ...