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的使用的更多相关文章

  1. jQuery File Upload 单页面多实例的实现

    jQuery File Upload 的 GitHub 地址:https://github.com/blueimp/jQuery-File-Upload 插件描述:jQuery File Upload ...

  2. jQuery File Upload done函数没有返回

    最近在使用jQuery File Upload 上传图片时发现一个问题,发现done函数没有callback,经过一番折腾,找到问题原因,是由于dataType: ‘json’造成的,改为autoUp ...

  3. 用jQuery File Upload做的上传控件demo,支持同页面多个上传按钮

    需求 有这么一个需求,一个form有多个文件要上传,但又不是传统的图片批量上传那种,是类似下图这种需求,一开始是用的swfupload做的上传,但是问题是如果有多个按钮的话,就要写很多重复的代码,于为 ...

  4. jquery file upload 文件上传插件

    1. jquery file upload 下载 jquery file upload Demo 地址:https://blueimp.github.io/jQuery-File-Upload/ jq ...

  5. jQuery File Upload跨域上传

    最近在做一个一手粮互联网项目,方案为前后端分离,自己负责前端框架,采用了Requirejs+avalonjs+jquery三个框架完成. 前后端通过跨域实现接口调用,中间也发现了不少问题,尤其是在富文 ...

  6. jquery ajax发送delete(use in jquery file upload delete file)

    环境: jQuery file upload HTML example code <div class="pic-preview"> <div class=&qu ...

  7. jquery file upload 后台收到的文件名中文乱码, filename中文乱码

    在jQuery File Upload.js文件里,在以下这个js中有个成员叫做 _initXHRData, 是一个function, 在这个function的最后部分有一个if-else分支,如下:

  8. jQuery File Upload

    jQuery File Upload介绍.............................................. 2 实现基本原理......................... ...

  9. jQuery File Upload 插件 php代码分析

    jquery file upload php代码分析首先进入构造方法 __construct() 再进入 initialize()因为我是post方式传的数据  在进入initialize()中的po ...

  10. jQuery File Upload blueimp with struts2 简单试用

    Official Site的话随便搜索就可以去了 另外新版PHP似乎都有问题  虽然图片都可以上传  但是response报错  我下载的是8.8.7木有问题   但是8.8.7版本结合修改main. ...

随机推荐

  1. Django REST Framework API Guide 04

    本节大纲 1.serializers 1.Serializers Serializers允许复杂的数据,像queryset和模型实例转换成源生的Python数据类型.从而可以更简单的被渲染成JSON, ...

  2. 转: hibernate配置文件hibernate.cfg.xml和.hbm.xml的详细解释

    http://blog.csdn.net/yuhui123999/article/details/51886531 hibernate.cfg.xml -标准的XML文件的起始行,version='1 ...

  3. ASP.NET MVC - 多国语言的简单实现

    定义一个类 public class Book {     public int ID { get; set; }     public string Title { get; set; }      ...

  4. python编程 之 PyMysql包接口,python中如何使用数据库

    1,环境介绍 要求:使用数据库TESTDB.EMPLOYMENT EMPLOYEE表字段为 FIRST_NAME, LAST_NAME, AGE, SEX 和 INCOME. 2,基本用法: impo ...

  5. 20165337 2017-2018-2《Java程序设计》课程总结

    一.每周作业链接汇总 预备作业一:我期望的师生关系 简要内容: 读完文章的感想 我印象深刻的老师 我期望的师生关系 预备作业二:学习基础和C语言基础调查 简要内容: 你有什么技能比大多人(超过90%以 ...

  6. 第一次发博,发个简单的Java程序发送手机短信验证

    最近在准备一个项目,想的登录时候用手机验证,就通过上网查阅了一下手机验证的实现方法,原来超级简单,下面将一步一步介绍. 1.去中国网建注册一个账号密码,首次注册送五条免费短信和3条免费彩信.具体的网址 ...

  7. 基本类型变量、引用类型变量的在java中的存放位置

    一.局部变量存储在方法栈中 在方法中声明的变量,即该变量是局部变量,每当程序调用方法时,系统都会为该方法建立一个方法栈,其所在方法中声明的变量就放在方法栈中,当方法结束系统会释放方法栈,其对应在该方法 ...

  8. 【ARTS】01_17_左耳听风-20190304~20190310

    ARTS: Algrothm: leetcode算法题目 Review: 阅读并且点评一篇英文技术文章 Tip/Techni: 学习一个技术技巧 Share: 分享一篇有观点和思考的技术文章 Algo ...

  9. LwIP Application Developers Manual3---链路层和网络层协议之IPV6,ICMP,IGMP

    1.前言 本文主要讲述链路层和网络层的协议IPV6,ICMP 2.IPV6 2.1 IPV6特性 IPv6是IPv4的更新.其最显著的差别在于地址空间由32位转换成128位 2.2 从应用的角度看IP ...

  10. dubbo源码分析14——DubboProtocol的export方法分析

    走到了这一步也挺不容易的,把之前的暴露入口代码再列出来回顾一下: //配置为none不暴露 if (! Constants.SCOPE_NONE.toString().equalsIgnoreCase ...