html:

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

css:

.field{
  max-width:720px;
  margin: auto;
  margin-top:60px;
  font-size:20px;
  .dropzone{
    padding: 54px 54px;
    .dz-message{
      height:84px;
      font{
        line-height:28px;
      }
      span.note{
        height:28px;
        margin-top:28px;
        font-size:15px;
      }     }
  }
}

js:

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

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. 读书笔记<深入理解JVM>01 关于OutOfMemoryError 堆空间的溢出

    代码片段如下: package com.gosaint.shiro; import java.util.ArrayList; import java.util.List; public class H ...

  2. [codeforces126B]Password

    解题关键:KMP算法中NEXT数组的理解. #include<bits/stdc++.h> #define maxn 1000006 using namespace std; typede ...

  3. 【总结整理】行内标签span设置position:absolute/float属性可以设置宽度与高度

    postion:absolute 跳出文本流,不是行内元素,设置宽高有效,我的理解. 引用下曹刘阳写的<编写高质量代码-web前端开发修炼之道>一书中看到的一句话:position:abs ...

  4. node Util 模块

    该util模块主要设计用于支持Node.js自己的内部API的需求.但是,许多实用程序对于应用程序和模块开发人员也很有用.它可以通过以下方式访问: const util = require('util ...

  5. loj10104 [POI 2008]Blockade

    传送门 分析 我们知道对于一个割点,我们如果去掉它就会使原来的图被分为若干块,则这是我们将所有块包含的点的个数两两相乘即可,而如果不是割点则对于图的连通性没有影响.注意在最后要加上2*(n-1)表示去 ...

  6. java 中一个char包含几个字节

    背景   char包含几个字节可能记得在上学的时候书上写的是2个字节,一直没有深究,今天我们来探究一下到底一个char多少个字节? Char   char在设计之初的时候被用来存储字符,可是世界上有那 ...

  7. 数据结构 elegant_sequence(优雅的序列)

    数据结构 elegant_sequence(优雅的序列) 问题描述 如果一个序列的元素的异或和等于 1,我们称这个序列为优雅的序列.现在给你一个 01 序列,和 m 次询问.对于每次询问,给出 l,r ...

  8. [raspberry pi3] 安装ffmpeg

    买了个pi3,pi相对于通常的嵌入式系统的最大好处是里面夹带了gcc编译器,有很多东西都不需要交叉编译了. arm和pc的性能还是不能比的,io的瓶颈还是很明显的, 想要编的快点还是要在pc上交叉编译 ...

  9. javascript jquery封装对象时的错误,求解!我想知道为什么

    jquery   封装对象时的错误 --------------------------------------------<input id="name" name=&qu ...

  10. UIViewController函数调用顺序

    /*********** 0 执行1次而已 ******************/ + (void)load { NSLog(@" 0:%s", __func__); } /*** ...