1.前提
- 必须同步提交 form 表单
- Form 表单编码方式 multipart/form-data
- 提交方式必须为 post
- 上传文件对应 input type=”file” 元素要提供 name 属性
2.一键上传的原理
3.一键上传的实现方法
jQuery ocupload实现
下载地址:(该地址属于国外网站,需要FQ才可访问)
http://code.google.com/p/ocupload/
导入 jquery.ocupload-1.1.2.js 到项目中
在页面引入 ocupload.js
<!-- 导入jquery核心类库 --><script type="text/javascript" src="/bos_management/js/jquery-1.8.3.js"></script><!-- 导入ocupload核心类库 --><script type="text/javascript" src="/bos_management/js/jquery.ocupload-1.1.2.js"></script>4
4
1
<!-- 导入jquery核心类库 -->
2
<script type="text/javascript" src="/bos_management/js/jquery-1.8.3.js"></script>
3
<!-- 导入ocupload核心类库 -->
4
<script type="text/javascript" src="/bos_management/js/jquery.ocupload-1.1.2.js"></script>
为导入的按钮添加一键上传的效果
$("#button-import").upload({ ???//文件上传的路径 ???action: ‘/bos_management/area_batchImport‘, ???onSelect: function() { ???????//选择文件后,关闭自动提交 ???????this.autoSubmit = false; ???????//获得文件名 ???????var filename = this.filename(); ???????//判断文件格式 ???????var regex = /^.*\.(xls|xlsx)$/; ???????if(regex.test(filename)) { ???????????this.submit(); ???????} else { ???????????$.messager.alert("警告", "请选择后缀名为xls或xlsx的文件", "warning"); ???????} ???}, ???//回调函数 ???onComplete: function(response) { ???????window.location.href = "/bos_management/pages/base/area.html"; ???}});21
1
$("#button-import").upload({2
//文件上传的路径
3
action: ‘/bos_management/area_batchImport‘,
4
onSelect: function() {5
//选择文件后,关闭自动提交
6
this.autoSubmit = false;
7
//获得文件名
8
var filename = this.filename();
9
//判断文件格式
10
var regex = /^.*\.(xls|xlsx)$/;
11
if(regex.test(filename)) {12
this.submit();
13
?} else {14
$.messager.alert("警告", "请选择后缀名为xls或xlsx的文件", "warning");15
?}
16
?},
17
//回调函数
18
onComplete: function(response) {19
window.location.href = "/bos_management/pages/base/area.html";
20
?}
21
});
来自为知笔记(Wiz)
附件列表
ocupload完成文件上传(一键上传)
原文地址：https://www.cnblogs.com/zhaoxuan734/p/8745834.html