上传文件插件dropzone的实例
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的实例的更多相关文章
- Uploadify 上传文件插件详解
Uploadify 上传文件插件详解 Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中 ...
- 项目一:第四天 1、快递员的条件分页查询-noSession,条件查询 2、快递员删除(逻辑删除) 3、基于Apache POI实现批量导入区域数据 a)Jquery OCUpload上传文件插件使用 b)Apache POI读取excel文件数据
1. 快递员的条件分页查询-noSession,条件查询 2. 快递员删除(逻辑删除) 3. 基于Apache POI实现批量导入区域数据 a) Jquery OCUpload上传文件插件使用 b) ...
- 使用 jquery 的 上传文件插件 uploadify 3.1 配合 java 来做一个简单的文件上次功能。并且在界面上有radio 的选择内容也要上传
使用 jquery 的 上传文件插件 uploadify 3.1 配合 java 来做一个简单的文件上次功能.并且在界面上有radio 的选择内容也要上传 uploadify 插件的 下载和文档地址 ...
- uploadify 上传文件插件
今天在项目中要用到文件上传功能时,想借助Jquery方式来实现,于是想到用uploadify插件来实现.不经意间在网上看到了一遍关于这个插件的用法,写的很好.在这里就分享给大家,希望对大家有帮助.以下 ...
- Ajax 无刷新上传文件插件 uploadify 的使用
在表单中无法直接使用 Ajax 上传文件,解决的思路可以是使用插件无刷新地上传文件,返回文件上传后的地址,然后把该地址作为 Ajax 的参数传递给服务器端进行数据库处理.可以使用 uploadify ...
- 【Bootstrap】bootstrap-fileinput上传文件插件
[bootstrap-fileinput] 这是个据传最好用的bootstrap相关联的文件上传控件,支持拖曳上传,多线程上传,上传文件预览等等功能. 首先还是说一下要引入的一些文件: <lin ...
- php 应用 bootstrap-fileinput 上传文件 插件 操作的方法
//先加载插件所需要的 js .css 文件 <link href="css/fileinput.css" rel="stylesheet" type=& ...
- Xshell拖拽上传文件插件
lrzsz是一款在linux里可代替ftp上传和下载的程序.在linux中支持直接拖拽上传的插件:同时也支持rz和sz进行命令上传和下载. 插件安装 yum -y install lrzsz 上传(r ...
- jQuery 自制上传头像插件-附带Demo实例(ajaxfileupload.js第三弹)
这篇文章主要是对前两篇关于ajaxfileupload.js插件的文章 <ASP.NET 使用ajaxfileupload.js插件出现上传较大文件失败的解决方法(ajaxfileupload. ...
随机推荐
- 读书笔记<深入理解JVM>01 关于OutOfMemoryError 堆空间的溢出
代码片段如下: package com.gosaint.shiro; import java.util.ArrayList; import java.util.List; public class H ...
- [codeforces126B]Password
解题关键:KMP算法中NEXT数组的理解. #include<bits/stdc++.h> #define maxn 1000006 using namespace std; typede ...
- 【总结整理】行内标签span设置position:absolute/float属性可以设置宽度与高度
postion:absolute 跳出文本流,不是行内元素,设置宽高有效,我的理解. 引用下曹刘阳写的<编写高质量代码-web前端开发修炼之道>一书中看到的一句话:position:abs ...
- node Util 模块
该util模块主要设计用于支持Node.js自己的内部API的需求.但是,许多实用程序对于应用程序和模块开发人员也很有用.它可以通过以下方式访问: const util = require('util ...
- loj10104 [POI 2008]Blockade
传送门 分析 我们知道对于一个割点,我们如果去掉它就会使原来的图被分为若干块,则这是我们将所有块包含的点的个数两两相乘即可,而如果不是割点则对于图的连通性没有影响.注意在最后要加上2*(n-1)表示去 ...
- java 中一个char包含几个字节
背景 char包含几个字节可能记得在上学的时候书上写的是2个字节,一直没有深究,今天我们来探究一下到底一个char多少个字节? Char char在设计之初的时候被用来存储字符,可是世界上有那 ...
- 数据结构 elegant_sequence(优雅的序列)
数据结构 elegant_sequence(优雅的序列) 问题描述 如果一个序列的元素的异或和等于 1,我们称这个序列为优雅的序列.现在给你一个 01 序列,和 m 次询问.对于每次询问,给出 l,r ...
- [raspberry pi3] 安装ffmpeg
买了个pi3,pi相对于通常的嵌入式系统的最大好处是里面夹带了gcc编译器,有很多东西都不需要交叉编译了. arm和pc的性能还是不能比的,io的瓶颈还是很明显的, 想要编的快点还是要在pc上交叉编译 ...
- javascript jquery封装对象时的错误,求解!我想知道为什么
jquery 封装对象时的错误 --------------------------------------------<input id="name" name=&qu ...
- UIViewController函数调用顺序
/*********** 0 执行1次而已 ******************/ + (void)load { NSLog(@" 0:%s", __func__); } /*** ...