上传文件插件dropzone的实例
2024-10-16 07:09:21
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/
最新文章
- re
- 用纯css改变下拉列表select框的默认样式(不兼容IE10以下)
- vs2012 发布网站时,发布目录为空
- 使用自定义的framework
- Linux下查看文件内容的命令
- javaweb实现验证码功能
- 查询Sql Server Agent 的job的执行情况。
- poj 3009 Curling 2.0( dfs )
- 互联网科技今年九个兴奋点:O2O深耕细作,可穿戴设备分水岭
- 【转】C#读取文件时的共享方式
- CommonsChunkPlugin并不是分离第三方库的好办法(DllPlugin科学利用浏览器缓存)
- C#面向插件级别的软件开发 - 开源研究系列文章
- Spring中的InitializingBean接口的使用
- 简述RPC原理实现
- 目前大热的AI和SLAM的职业发展的想法
- 尚学堂java 答案解析 第四章
- SQL语句(九)使用特殊关系运算符查询
- nodeJS基础---->;nodeJS的使用(一)
- war项目部署流程
- Hexo Next配置百度分享、加入动态背景、接入网页在线联系功能、页脚增加统计功能、添加gitment、添加热度、阅读量排行
热门文章
- 主机(windows)与VMware虚拟机(linux)互传文件
- [patl2-001]紧急救援
- css知多少(3)——样式来源与层叠规则(转)
- STM32 C++编程 001 工程模板
- 算法Sedgewick第四版-第1章基础-015一stack只保留last指针
- ASCII\UNICODE编码的区别
- R: 关于文件 文件夹的处理:file.show() dir.create().....
- 20、Basic Shell_for_while_grep_find
- hdu6357 Hills And Valleys
- Django框架 之 view视图