Java中應用WebUploader插件上傳年夜文件單文件和多文件的辦法小結。本站提示廣大學習愛好者：（Java中應用WebUploader插件上傳年夜文件單文件和多文件的辦法小結）文章只能為提供參考，不一定能成為您想要的結果。以下是Java中應用WebUploader插件上傳年夜文件單文件和多文件的辦法小結正文
一.應用webuploader插件的緣由解釋
被如今做的項目坑了。
先說一下我的項目架構spring+struts2+mybatis+MySQL
然後呢。之前說好的依照2G上傳便可以了，因而乎，用了ajaxFileUpload插件，由於之前用圖片上傳也是用這個，所以上傳附件的時刻就直接拿來用了
各類碼代碼，測試也測過了，2G文件上傳沒成績，坑來了，項目上線後，客戶又請求上傳4G文件，乃至還有20G以上的。。納尼，你不早說哦。。。
在IE11下用ajaxFileUpload.js插件上傳跨越4G的文件，IE直接拋出異常了。彈出 算術成果跨越32位 的新聞.
以下圖：
附加解釋一下，我的體系是64位，8G內存，谷歌閱讀器和IE11閱讀器都是32位的。谷歌下用AjaxFileUpload上傳8G都成績。都不會報錯。
IE11下跨越4G直接報上圖這個錯了。沒方法。換插件。
二.插件選擇
1.stream上傳插件。stream是處理分歧閱讀器上傳文件插件，是Uploadify的flash版和html5的聯合。插件地址http://www.twinkling.cn/
功效確切很壯大，不外CSS款式固定逝世了，和我如今項目標進度條款式很紛歧樣。照樣廢棄了這個插件
2.Webuploader 插件。WebUploader是由Baidu WebFE(FEX)團隊開辟的一個簡略的以HTML5為主，FLASH為輔的古代文件上傳組件。在古代的閱讀器外面能充足施展HTML5的優勢，同時又不摒棄主流IE閱讀器，沿用本來的FLASH運轉時，兼容IE6+，iOS 6+, Android 4+。兩套運轉時，異樣的挪用方法，可供用戶隨意率性選用。
采取年夜文件分片並發上傳，極年夜的進步了文件上傳效力。插件地址 http://fex.百度.com/webuploader/
這個插件可以自界說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插件上傳年夜文件單文件和多文件的辦法小結的相干常識，願望對年夜家有所贊助，假如年夜家有任何疑問請給我留言，小編會實時答復年夜家的。在此也異常感激年夜家對網站的支撐！
