WebUploader 简单实例
作者：
秒速五厘米
文章简介：
WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE浏览器，沿用原来的FLASH运行时，兼容IE6+，iOS 6+, android 4+。两套运行时，同样的调用方式，可供用户任意选用。 采用大文件分片并发上传，极大的提高了文件上传效率。
1.新建一个测试页面，引入相关的样式表css，js文件
注意，要首先引入jquery的js文件，我的页面是嵌套的，首页已经引入
引入文件清单：
@ bootstrap的css,js文件
@ 在【http://fex.baidu.com/webuploader/】这里下载webuploader的压缩包，我这只是引入了
【webuploader.css】和【webuploader.js】
@ 引入自己的业务js文件
<!--引入CSS--> <link rel="stylesheet" type="text/css" href="static/html/bigFileUpload/assets/bootstrap-3.3.7-dist/css/bootstrap.css"> <link rel="stylesheet" type="text/css" href="static/html/bigFileUpload/assets/webuploader.css"> <!--官网例子--> <!--<div id="uploader" class="wu-example">--> <!--<!–用来存放文件信息–>--> <!--<div id="thelist" class="uploader-list"></div>--> <!--<div class="btns">--> <!--<div id="picker">选择文件</div>--> <!--<button id="ctlBtn" class="btn btn-default">开始上传</button>--> <!--</div>--> <!--</div>--> <!--单文件--> <div id="uploader" class="wu-example"> <!--用来存放文件信息--> <div id="thelist" class="uploader-list"></div> <div class="btns"> <div id="attach"></div> <button id="upload" class="btn btn-default">开始上传</button> </div> </div> <!--多文件--> <!--<div id="uploader1" class="wu-example">--> <!--<!–用来存放文件信息–>--> <!--<div id="thelist1" class="uploader-list"></div>--> <!--<div class="btns">--> <!--<div id="multi"></div>--> <!--<input type="button" value="上传" id="multiUpload"/>--> <!--</div>--> <!--</div>--> <!--引入JS--> <script type="text/javascript" src="static/html/bigFileUpload/assets/webuploader.js"></script> <script type="text/javascript" src="static/html/bigFileUpload/assets/bootstrap-3.3.7-dist/js/bootstrap.js"></script> <script type="text/javascript" src="static/html/bigFileUpload/upload.js"></script>
2.编写业务js文件
$(function(){
var $list = $("#thelist");
var uploader;
// 初始化uploader
uploader = WebUploader.create({
auto:false, //不自动提交，需要点击
pick: {
id: '#attach',
label: '选择文件',
},
server: 'test/save', //后台接收服务
resize: false,
formData: {"Authorization": localStorage.token}, //额外参数传递，可以没有
chunked: true, //分片
chunkSize: 10 * 1024 * 1024, //分片大小指定
threads:1, //线程数量
disableGlobalDnd: true //禁用拖拽
});
//添加文件页面提示
uploader.on( "fileQueued", function( file ) {
$list.html( "<div id='"+ file.id + "' class='item'>" +
"<h4 class='info'>" + file.name + "</h4>" +
"<p class='state'>等待上传...</p>" +
"</div>" );
});
//开进度条
uploader.on( 'uploadProgress', function( file, percentage ) {
var $li = $( '#'+file.id ),
$percent = $li.find('.progress .progress-bar');
if ( !$percent.length ) {
$percent = $('<div class="progress progress-striped active">' +
'<div class="progress-bar" role="progressbar" style="width: 0%">' +
'</div>' +
'</div>').appendTo( $li ).find('.progress-bar');
}
$li.find('p.state').text('上传中');
$percent.css( 'width', percentage * 100 + '%' );
});
//上传成功
uploader.on( "uploadSuccess", function( file ) {
$( "#"+file.id ).find("p.state").text("已上传");
$('#' + file.id).find('.progress').fadeOut();
});
//上传失败
uploader.on( "uploadError", function( file ) {
$( "#"+file.id ).find("p.state").text("上传出错");
uploader.cancelFile(file);
uploader.removeFile(file,true);
});
//点击上传
$("#upload").on("click", function() {
uploader.upload();
})
}); 3.编写后台文件接收文件
package org.triber.portal.upload;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.http.MediaType;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import java.io.*;
import java.util.HashMap;
import java.util.Map;
@Slf4j
@RestController
@RequestMapping(value = "/test", produces = MediaType.APPLICATION_JSON_VALUE)
public class UploadController {
@Value("${AREA_FILE}")
private String AREA_FILE;//excel下载文件名
@Value("${AREA_DIR}")
private String AREA_DIR;//excel临时存储文件夹
/**
* 上传文件
* @param file
* @return
* @throws IOException
*/
@RequestMapping(value = "/save", produces = {"application/json"})
public Map<String,String> importExcel(@RequestParam MultipartFile file) throws IOException {
//获取文件名
String originalFilename = file.getOriginalFilename();
//合并文件
RandomAccessFile raFile = null;
BufferedInputStream inputStream=null;
try{
File dirFile = new File(AREA_DIR, originalFilename);
//以读写的方式打开目标文件
raFile = new RandomAccessFile(dirFile, "rw");
raFile.seek(raFile.length());
inputStream = new BufferedInputStream(file.getInputStream());
byte[] buf = new byte[1024];
int length = 0;
while ((length = inputStream.read(buf)) != -1) {
raFile.write(buf, 0, length);
}
}catch(Exception e){
throw new IOException(e.getMessage());
}finally{
try {
if (inputStream != null) {
inputStream.close();
}
if (raFile != null) {
raFile.close();
}
}catch(Exception e){
throw new IOException(e.getMessage());
}
}
//以下信息没用。比较扯淡
//初始化返回信息
Map<String, String> map = new HashMap<String, String>();
String result = "";
int res = -1;
//返回提示信息
map.put("result", result);
return map;
}
}