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) {
}
})
具体的官方文档地址 ：