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/

最新文章

  1. re
  2. 用纯css改变下拉列表select框的默认样式(不兼容IE10以下)
  3. vs2012 发布网站时,发布目录为空
  4. 使用自定义的framework
  5. Linux下查看文件内容的命令
  6. javaweb实现验证码功能
  7. 查询Sql Server Agent 的job的执行情况。
  8. poj 3009 Curling 2.0( dfs )
  9. 互联网科技今年九个兴奋点:O2O深耕细作,可穿戴设备分水岭
  10. 【转】C#读取文件时的共享方式
  11. CommonsChunkPlugin并不是分离第三方库的好办法(DllPlugin科学利用浏览器缓存)
  12. C#面向插件级别的软件开发 - 开源研究系列文章
  13. Spring中的InitializingBean接口的使用
  14. 简述RPC原理实现
  15. 目前大热的AI和SLAM的职业发展的想法
  16. 尚学堂java 答案解析 第四章
  17. SQL语句(九)使用特殊关系运算符查询
  18. nodeJS基础----&gt;nodeJS的使用(一)
  19. war项目部署流程
  20. Hexo Next配置百度分享、加入动态背景、接入网页在线联系功能、页脚增加统计功能、添加gitment、添加热度、阅读量排行

热门文章

  1. 主机(windows)与VMware虚拟机(linux)互传文件
  2. [patl2-001]紧急救援
  3. css知多少(3)——样式来源与层叠规则(转)
  4. STM32 C++编程 001 工程模板
  5. 算法Sedgewick第四版-第1章基础-015一stack只保留last指针
  6. ASCII\UNICODE编码的区别
  7. R: 关于文件 文件夹的处理:file.show() dir.create().....
  8. 20、Basic Shell_for_while_grep_find
  9. hdu6357 Hills And Valleys
  10. Django框架 之 view视图