jQuery File Upload的使用
jQuery File Upload 是一个Jquery文件上传组件,支持多文件上传、取消、删除,上传前缩略图预览、列表显示图片大小,支持上传进度条显示等,以下就介绍一下该插件的简单使用
1、需要加载的js文件有
jquery.js,
jquery-ui-widget.js,
jquery.iframe-transport.js,
jquery.fileupload.js
2、upload.js的配置
a、html代码
<input type="file" id='file'>
<input type="button" value="提交" id='submit'>
b、与页面绑定的javascript代码
$('#submit').click(function () {
if (currentFile) {
//动态的传输参数
currentFile.formData = {id:123};
//进行文件提交
currentFile.submit();
} else {
utils.error('请传入.xlsx文件');
}
});
c、javascript代码
$('#file').fileupload({
//type: 文件上传HTTP请求方式,可以选择“POST”,“PUT”或者"PATCH",
type: 'POST',
//url:请求发送的目标url,默认为post方式
url: '/admin/qa/upload-file',
//dataType:希望从服务器返回的数据类型,默认"json"
dataType: 'json',
//formData:需要传输的参数,这里是静态的传输,如果需要动态的传输需要在add这个进程里面进行传输
formData: {id: 123},
//autoUpload:是否自动上传,即当文件放入file之后便自动上传,默认为true
autoUpload: false,
//acceptFileTypes:允许上传的的文件类型
acceptFileTypes: /(\.|\/)xlsx$/i,
//maxFileSize: 最大上传文件大小
maxFileSize: 1,
//minFileSize:最小上传文件大小,单位B
minFileSize: 1,
//previewMaxWidth : 图片预览区域最大宽度
//添加文件后触发
add: function (ev, data) {
currentFile = null;
$('#result-panel').html('');
var name = data.files[0].name;
if (/(\.|\/)xlsx$/i.test(name)) {
$('#xlsFileShow').html(name);
//data里面包含些方法,如果submit提交这个API,可以根据用户的需求进行提交
//如果需要动态的传参可以用data.formData=123,进行传输
currentFile = data;
//执行如果不符合的条件
} else {
//执行如果传入的文件名称不符合正则匹配的代码
}
},
//当一个单独的文件处理队列结束(完成或失败时)触发
progressalways: function (e, data) {
},
//全局上传处理事件的回调函数,即上传过程时触发
progressall: function (e, data) {
//进度条可以用data.loaded与data.total的比进行完成
},
//上传请求失败时触发的回调函数,如果服务器返回一个带有error属性的json响应这个函数将不会被触发
fail: function (e, data) {
},
// 上传请求成功时触发的回调函数,如果服务器返回一个带有error属性的json响应这个函数也会被触发
done: function (e, data) {
},
//上传请求结束时(成功,错误或者中止)都会被触发。
always: function (e, data) {
}
})
具体的官方文档地址 :
http://hayageek.com/docs/jquery-upload-file.php#doc
jQuery File Upload的使用的更多相关文章
- jQuery File Upload 单页面多实例的实现
jQuery File Upload 的 GitHub 地址:https://github.com/blueimp/jQuery-File-Upload 插件描述:jQuery File Upload ...
- jQuery File Upload done函数没有返回
最近在使用jQuery File Upload 上传图片时发现一个问题,发现done函数没有callback,经过一番折腾,找到问题原因,是由于dataType: ‘json’造成的,改为autoUp ...
- 用jQuery File Upload做的上传控件demo,支持同页面多个上传按钮
需求 有这么一个需求,一个form有多个文件要上传,但又不是传统的图片批量上传那种,是类似下图这种需求,一开始是用的swfupload做的上传,但是问题是如果有多个按钮的话,就要写很多重复的代码,于为 ...
- jquery file upload 文件上传插件
1. jquery file upload 下载 jquery file upload Demo 地址:https://blueimp.github.io/jQuery-File-Upload/ jq ...
- jQuery File Upload跨域上传
最近在做一个一手粮互联网项目,方案为前后端分离,自己负责前端框架,采用了Requirejs+avalonjs+jquery三个框架完成. 前后端通过跨域实现接口调用,中间也发现了不少问题,尤其是在富文 ...
- jquery ajax发送delete(use in jquery file upload delete file)
环境: jQuery file upload HTML example code <div class="pic-preview"> <div class=&qu ...
- jquery file upload 后台收到的文件名中文乱码, filename中文乱码
在jQuery File Upload.js文件里,在以下这个js中有个成员叫做 _initXHRData, 是一个function, 在这个function的最后部分有一个if-else分支,如下:
- jQuery File Upload
jQuery File Upload介绍.............................................. 2 实现基本原理......................... ...
- jQuery File Upload 插件 php代码分析
jquery file upload php代码分析首先进入构造方法 __construct() 再进入 initialize()因为我是post方式传的数据 在进入initialize()中的po ...
- jQuery File Upload blueimp with struts2 简单试用
Official Site的话随便搜索就可以去了 另外新版PHP似乎都有问题 虽然图片都可以上传 但是response报错 我下载的是8.8.7木有问题 但是8.8.7版本结合修改main. ...
随机推荐
- Django REST Framework API Guide 04
本节大纲 1.serializers 1.Serializers Serializers允许复杂的数据,像queryset和模型实例转换成源生的Python数据类型.从而可以更简单的被渲染成JSON, ...
- 转: hibernate配置文件hibernate.cfg.xml和.hbm.xml的详细解释
http://blog.csdn.net/yuhui123999/article/details/51886531 hibernate.cfg.xml -标准的XML文件的起始行,version='1 ...
- ASP.NET MVC - 多国语言的简单实现
定义一个类 public class Book { public int ID { get; set; } public string Title { get; set; } ...
- python编程 之 PyMysql包接口,python中如何使用数据库
1,环境介绍 要求:使用数据库TESTDB.EMPLOYMENT EMPLOYEE表字段为 FIRST_NAME, LAST_NAME, AGE, SEX 和 INCOME. 2,基本用法: impo ...
- 20165337 2017-2018-2《Java程序设计》课程总结
一.每周作业链接汇总 预备作业一:我期望的师生关系 简要内容: 读完文章的感想 我印象深刻的老师 我期望的师生关系 预备作业二:学习基础和C语言基础调查 简要内容: 你有什么技能比大多人(超过90%以 ...
- 第一次发博,发个简单的Java程序发送手机短信验证
最近在准备一个项目,想的登录时候用手机验证,就通过上网查阅了一下手机验证的实现方法,原来超级简单,下面将一步一步介绍. 1.去中国网建注册一个账号密码,首次注册送五条免费短信和3条免费彩信.具体的网址 ...
- 基本类型变量、引用类型变量的在java中的存放位置
一.局部变量存储在方法栈中 在方法中声明的变量,即该变量是局部变量,每当程序调用方法时,系统都会为该方法建立一个方法栈,其所在方法中声明的变量就放在方法栈中,当方法结束系统会释放方法栈,其对应在该方法 ...
- 【ARTS】01_17_左耳听风-20190304~20190310
ARTS: Algrothm: leetcode算法题目 Review: 阅读并且点评一篇英文技术文章 Tip/Techni: 学习一个技术技巧 Share: 分享一篇有观点和思考的技术文章 Algo ...
- LwIP Application Developers Manual3---链路层和网络层协议之IPV6,ICMP,IGMP
1.前言 本文主要讲述链路层和网络层的协议IPV6,ICMP 2.IPV6 2.1 IPV6特性 IPv6是IPv4的更新.其最显著的差别在于地址空间由32位转换成128位 2.2 从应用的角度看IP ...
- dubbo源码分析14——DubboProtocol的export方法分析
走到了这一步也挺不容易的,把之前的暴露入口代码再列出来回顾一下: //配置为none不暴露 if (! Constants.SCOPE_NONE.toString().equalsIgnoreCase ...