批量文件上传Webuploader Demo及服务端java实例代码

介绍批量文件上传Webuploader插件的完整Demo教程和跨域访问,包括前端css和js代码以及服务端java代码,演示了webuploader的使用方法,服务端基于JAVA servlet实现了一个简单的接收上传文件并保存在服务端的功能。

WebUploader是百度fe团队开发的开源批量文件上传插件,可用于PC浏览器、手机客户端所使用。支持批量、并发上传,压缩、预览等功能,具体可访问其官网:http://fex.baidu.com/webuploader/。本文介绍了一个基于webuploader的简单Demo,包括客户端和服务端两端的代码,可以直接在本地部署运行。

配置服务端访问接口

WebUploader默认的http访问方式为POST,访问地址为server属性配置的值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// 实例化
uploader = WebUploader.create({
pick: {
id: '#filePicker',
label: '点击选择图片'
},
dnd: '#uploader .queueList',
paste: document.body,

accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,png',
mimeTypes: 'image/*'
},

// swf文件路径
swf: BASE_URL + '/js/Uploader.swf',

disableGlobalDnd: true,

chunked: true,
method: 'POST', // http请求方式
auto: false, // 是否自动上传
server: '/zhijian-web/upload', // 服务端访问接口地址
// server: 'http://2betop.net/fileupload.php',
fileNumLimit: 300,
fileSizeLimit: 5 * 1024 * 1024, // 200 M
fileSingleSizeLimit: 1 * 1024 * 1024 // 50 M
});

获得服务端返回值

服务端基于servlet提供了简单的图片上传接口/upload,供浏览器访问。

服务端代码如下:

1
2
3
4
5
6
7
8
9
10
11
String sessionId = request.getSession().getId();
PrintWriter writer = null;
try{
response.setContentType("application/json;charset=UTF-8");
writer = response.getWriter();
writer.print(sessionId); // 返回一个session ID的字符串
}finally{
if(writer != null){
writer.close();
}
}

服务端也可以返回JSON格式的数据,本文提供的webuploader Demo只是个简单的示例。

前端js代码如下:

1
2
3
4
uploader.on( 'uploadSuccess', function(file ,response) {
console.log(response._raw);
$('.page-container').attr('sessionId', response._raw);
});

WebUploader Demo服务端log输出结果如下图所示。
webuploader Demo

jquery模拟点击,自定义任意图标上点击可上传

js代码如下:

1
2
3
4
5
// 模拟点击,触发图片上传功能
$('.upload-img').on('click', function () {
console.log('click~~~~~~');
$($('.webuploader-element-invisible')[0]).click();
});

点击Demo中导航条的本地上传图片可以触发图片上传功能,运行结果如上图所示
webuploader Demo

跨域访问

跨域访问时,浏览器会先发送一个options请求验证是否跨域

如果服务器的响应头部中有如下信息:
Access-Control-Allow-Origin: #允许访问的源,如”localhost:8080”。浏览器收到这个响应就会继续原来的请求,否则就会终止

所以Demo示例中针对跨域访问重载了doOptions方法,示例代码如下:

1
2
3
4
5
6
7
8
@Override
protected void doOptions(HttpServletRequest arg0, HttpServletResponse arg1)
throws ServletException, IOException {

// TODO Auto-generated method stub
System.out.println("request options.............");
arg1.addHeader("Access-Control-Allow-Origin", "http://xxxxxxx"); //设置
super.doOptions(arg0, arg1);
}

具体可参考知乎问题用webuploader怎么解决跨域上传文件的问题

WebUploader Demo完整示例下载地址:视频下载地址