Java中使用WebUploader插件上传大文件单文件和多文件的方法小结
程序员文章站
2024-03-12 17:21:44
一.使用webuploader插件的原因说明
被现在做的项目坑了。
先说一下我的项目架构spring+struts2+mybatis+mysql
然后呢。...
一.使用webuploader插件的原因说明
被现在做的项目坑了。
先说一下我的项目架构spring+struts2+mybatis+mysql
然后呢。之前说好的按照2g上传就可以了，于是乎，用了ajaxfileupload插件，因为之前用图片上传也是用这个，所以上传附件的时候就直接拿来用了
各种码代码，测试也测过了，2g文件上传没问题，坑来了，项目上线后，客户又要求上传4g文件，甚至还有20g以上的。。纳尼，你不早说哦。。。
在ie11下用ajaxfileupload.js插件上传超过4g的文件，ie直接抛出异常了。弹出 算术结果超过32位 的消息.
如下图：
附加说明一下，我的系统是64位，8g内存，google浏览器和ie11浏览器都是32位的。google下用ajaxfileupload上传8g都问题。都不会报错。
ie11下超过4g直接报上图这个错了。没办法。换插件。
二.插件选择
1.stream上传插件。stream是解决不同浏览器上传文件插件，是uploadify的flash版和html5的结合。插件地址
功能确实很强大，不过css样式固定死了，和我现在项目的进度条样式很不一样。还是放弃了这个插件
2.webuploader 插件。webuploader是由baidu webfe(fex)团队开发的一个简单的以html5为主，flash为辅的现代文件上传组件。在现代的浏览器里面能充分发挥html5的优势，同时又不摒弃主流ie浏览器，沿用原来的flash运行时，兼容ie6+，ios 6+, android 4+。两套运行时，同样的调用方式，可供用户任意选用。
采用大文件分片并发上传，极大的提高了文件上传效率。插件地址
这个插件可以自定义css样式啊。功能也很强大，于是乎果断采用这个插件。
三.webuploader 单文件上传
我用的是webuploader0.1.5版本的,webuploader主要是把大文件在客户端进行分片，比如按照每5m进行分片发送请求，后台接收到文件进行合并文件。两种方式合并文件，第一种等所有分片都传到后台，然后在合并，这种要保障分片顺序正确，第二种是边分片边合并。项目里我使用的是第二种。使用web uploader文件上传需要引入三种资源：js, css, swf。
1.引入js文件
<script type="text/javascript" src="../main/js/webuploader.js"></script> <script type="text/javascript" src="../main/js/webuploader.min.js"></script>
2.引入css样式
<link href="../main/css/webuploader.css" rel="stylesheet" type="text/css" />
3.引入swf，swf不直接引用，在webuploader初始化的时候指定swf的路径就可以了。
4.upload3.html
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta http-equiv="content-language" content="ja" /> <meta http-equiv="content-script-type" content="text/javascript" /> <meta http-equiv="content-style-type" content="text/css" /> <title>demo</title> <link href="../main/css/stream-v1.css" rel="stylesheet" type="text/css" /> <link href="../main/css/webuploader.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="../main/js/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../main/js/jquery-2.1.4.min.js"></script> <script type="text/javascript" src="../main/js/jquery-ui.min.js"></script> <script type="text/javascript" src="../main/js/bootstrap-datepicker.min.js"></script> <script type="text/javascript" src="../main/js/locales/bootstrap-datepicker.ja.min.js"></script> <script type="text/javascript" src="../main/js/webuploader.js"></script> <script type="text/javascript" src="../main/js/webuploader.min.js"></script> <script type="text/javascript" src="../js/contents/upload3.js"></script> </head> <body> <div id="uploader" class="wu-example"> <!--用来存放文件信息--> <div id="thelist" class="uploader-list"></div> <div class="btns"> <div id="attach"></div> <input type="button" value="上传" id="upload"/> </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> </body> </html>
画面比较简单，长这个样子
5.upload3.js
包含单文件上传，多文件上传，和webuploader多实例
/*********************************webupload 单文件上传 begin*****************************************/
$(function(){
var $list = $("#thelist");
var uploader ;// 实例化
uploader = webuploader.create({
auto:false, //是否自动上传
pick: {
id: '#attach',
name:"file", //这个地方 name 没什么用，虽然打开调试器，input的名字确实改过来了。但是提交到后台取不到文件。如果想自定义file的name属性，还是要和fileval 配合使用。
label: '点击选择图片',
multiple:false //默认为true，就是可以多选
},
swf: '../../main/js/uploader.swf',
//fileval:'multifile', //自定义file的name属性，我用的版本是0.1.5 ,打开客户端调试器发现生成的input 的name 没改过来。
//名字还是默认的file,但不是没用哦。虽然客户端名字没改变，但是提交到到后台，是要用multifile 这个对象来取文件的，用file 是取不到文件的
// 建议作者有时间把这个地方改改啊，搞死人了。。
server: "contentsdetail!ajaxattachupload.action",
duplicate:true,//是否可重复选择同一文件
resize: false,
formdata: {
"status":"file",
"contentsdto.contentsid":"0000004730",
"uploadnum":"0000004730",
"existflg":'false'
},
compress: null,//图片不压缩
chunked: true, //分片处理
chunksize: 5 * 1024 * 1024, //每片5m
chunkretry:false,//如果失败，则不重试
threads:1,//上传并发数。允许同时最大上传进程数。
// runtimeorder: 'flash',
// 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候，把图片打开。
disableglobaldnd: true
});
// 当有文件添加进来的时候
uploader.on( "filequeued", function( file ) {
console.log("filequeued:");
$list.append( "<div id='"+ file.id + "' class='item'>" +
"<h4 class='info'>" + file.name + "</h4>" +
"<p class='state'>等待上传...</p>" +
"</div>" );
});
//当所有文件上传结束时触发
uploader.on("uploadfinished",function(){
console.log("uploadfinished:");
})
//当某个文件上传到服务端响应后，会派送此事件来询问服务端响应是否有效。
uploader.on("uploadaccept",function(object,ret){
//服务器响应了
//ret._raw 类似于 data
var data =json.parse(ret._raw);
if(data.resultcode != "1" && data.resultcode != "3"){
if(data.resultcode == "9"){
uploader.reset();
alert("error");
return false;
}
}else{
//e05017
uploader.reset();
alert("error");
return false;
}
})
//当文件上传成功时触发。
uploader.on( "uploadsuccess", function( file ) {
$( "#"+file.id ).find("p.state").text("已上传");
});
uploader.on( "uploaderror", function( file ) {
$( "#"+file.id ).find("p.state").text("上传出错");
uploader.cancelfile(file);
uploader.removefile(file,true);
uploader.reset();
});
$("#upload").on("click", function() {
uploader.upload();
})
});
/*********************************webupload 单文件上传 end*******************************************/
/*********************************webupload 多文件上传 begin*****************************************/
$(function(){
var $list = $("#thelist1");
var filesize = 0; //总文件大小
var filename = []; //文件名列表
var filesizeonebyone =[];//每个文件大小
var uploader ;// 实例化
uploader = webuploader.create({
auto:false, //是否自动上传
pick: {
id: '#multi',
label: '点击选择文件',
name:"multifile"
},
swf: '../../main/js/uploader.swf',
server: "contentsdetail!multiupload.action",
duplicate:true, //同一文件是否可重复选择
resize: false,
formdata: {
"status":"multi",
"contentsdto.contentsid":"0000004730",
"uploadnum":"0000004730",
"existflg":'false'
},
compress: null,//图片不压缩
chunked: true, //分片
chunksize: 5 * 1024 * 1024, //每片5m
chunkretry:false,//如果失败，则不重试
threads:1,//上传并发数。允许同时最大上传进程数。
//filenumlimit:50,//验证文件总数量, 超出则不允许加入队列
// runtimeorder: 'flash',
// 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候，把图片打开。
disableglobaldnd: true
});
// 当有文件添加进来的时候
uploader.on( "filequeued", function( file ) {
console.log("filequeued:");
$list.append( "<div id='"+ file.id + "' class='item'>" +
"<h4 class='info'>" + file.name + "</h4>" +
"<p class='state'>等待上传...</p>" +
"</div>" );
});
// 当开始上传流程时触发
uploader.on( "startupload", function() {
console.log("startupload");
//添加额外的表单参数
$.extend( true, uploader.options.formdata, {"filesize":filesize,"multifilename":filename.join(","),"filesizeonebyone":filesizeonebyone.join(",")});
});
//当某个文件上传到服务端响应后，会派送此事件来询问服务端响应是否有效。
uploader.on("uploadaccept",function(object,ret){
//服务器响应了
//ret._raw 类似于 data
console.log("uploadaccept");
console.log(ret);
var data =json.parse(ret._raw);
if(data.resultcode!="1" && data.resultcode !="3"){
if(data.resultcode == "9"){
alert("error");
uploader.reset();
return;
}
}else{
uploader.reset();
alert("error");
}
})
uploader.on( "uploadsuccess", function( file ) {
$( "#"+file.id ).find("p.state").text("已上传");
});
uploader.on( "uploaderror", function( file,reason ) {
$( "#"+file.id ).find("p.state").text("上传出错");
console.log("uploaderror");
console.log(file);
console.log(reason);
//多个文件
var filearray = uploader.getfiles();
for(var i = 0 ;i<filearray.length;i++){
uploader.cancelfile(filearray[i]);
uploader.removefile(filearray[i],true);
}
uploader.reset();
filesize = 0;
filename = [];
filesizeonebyone=[];
});
//当validate不通过时，会以派送错误事件的形式通知调用者
uploader.on("error",function(){
console.log("error");
uploader.reset();
filesize = 0;
filename = [];
filesizeonebyone=[];
alert("error");
})
//如果是在模态框里的上传按钮，点击file的时候不会触发控件
//修复model内部点击不会触发选择文件的bug
/* $("#multi .webuploader-pick").click(function () {
uploader.reset();
filesize = 0;
filename = [];
filesizeonebyone=[];
$("#multi :file").click();//关键代码
});*/
//选择文件之后执行上传
$(document).on("change","input[name='multifile']", function() {
var filearray1 = uploader.getfiles();
for(var i = 0 ;i<filearray1.length;i++){
//后台用
filesize +=filearray1[i].size;
filesizeonebyone.push(filearray1[i].size);
filename.push(filearray1[i].name);
}
console.log(filesize);
console.log(filesizeonebyone);
console.log(filename);
})
/**
* 多文件上传
*/
$("input[name='multiupload']").on("click",function(){
uploader.upload();
})
});
/*********************************webupload 多文件上传 end*****************************************/
/************************************webuploader的自带参数提交到后台的参数列表*************************
* {
//web uploader 的自带参数
lastmodifieddate=[wed apr 27 2016 16:45:01 gmt+0800 (中国标准时间)],
chunks=[3], chunk=[0],
type=[audio/wav], uid=[yangl], id=[wu_file_0],
size=[268620636], name=[3.wav],
//formdata的参数
contentsdto.contentsid=[0000004730], existflg=[false],
status=[file], uploadnum=[0000004730]
}
*********************************************************************************************/
6.contentsdetail.action
//单文件上传后台代码
public void ajaxattachupload() {
string path = "d:\\test\\"+filefilename;
try {
file file = this.getfile();
fileutil.randomaccessfile(path, file);
//如果文件小与5m的话，分片参数chunk的值是null
if(stringutils.isempty(chunk)){
outjson("0", "success", "");
}else{
//chunk 分片索引，下标从0开始
//chunks 总分片数
if (integer.valueof(chunk) == (integer.valueof(chunks) - 1)) {
outjson("0", "上传成功", "");
} else {
outjson("2", "上传中" + filefilename + " chunk:" + chunk, "");
}
}
} catch (exception e) {
outjson("3", "上传失败", "");
}
}
fileutil.java
/**
* 指定位置开始写入文件
* @param tempfile 输入文件
* @param outpath 输出文件的路径(路径+文件名)
* @throws ioexception
*/
public static void randomaccessfile( string outpath,file tempfile) throws ioexception{
randomaccessfile rafile = null;
bufferedinputstream inputstream=null;
try{
file dirfile = new file(outpath);
//以读写的方式打开目标文件
rafile = new randomaccessfile(dirfile, "rw");
rafile.seek(rafile.length());
inputstream = new bufferedinputstream(new fileinputstream(tempfile));
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());
}
}
}
7.效果图
以上所述是小编给大家介绍的java中使用webuploader插件上传大文件单文件和多文件的方法小结的相关知识，希望对大家有所帮助