webuploader在springMVC+jquery+Java開發(fā)環(huán)境下的大文件分片上傳的實例代碼
更新時間：2017年04月18日 11:34:14 作者：wanglong1990421
這篇文章主要介紹了webuploader在springMVC+jquery+Java開發(fā)環(huán)境下的大文件分片上傳的實例代碼,需要的朋友可以參考下
注意:
1,webuploader上傳組件會和jQuery自帶的上傳組件沖突,所以不要使用<form>標簽中添加上傳文件的屬性;
enctype="multipart/form-data"
2.并且屏蔽ApplicationContext-mvc.xml里面的攔截配置!
<!-- 上傳攔截，如最大上傳值及最小上傳值 -->
<!--新增加的webuploader上傳組件,必須要屏蔽這里的攔截機制
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver" >
<property name="maxUploadSize">
<value>1073741824</value>
</property>
<property name="maxInMemorySize">
<value>1073741824</value>
</property>
<property name="defaultEncoding">
<value>utf-8</value>
</property>
</bean>
--> 下面正式開始前后臺代碼開發(fā):
1.在頁面jsp文件中,調用webuploader組件的公共文件
<link rel="stylesheet" href="static/css/webuploader.css" rel="external nofollow" />
<script type="text/javascript" src="static/js/webuploader.js"></script>
<script type="text/javascript" src="static/js/webuploader.min.js"></script>
<script type="text/javascript" src="static/js/upload3.js"></script> 頁面上的控件代碼:
<div id="uploader">
<!--用來存放文件信息-->
<div id="thelist"></div>
<div>
<div id="attach"></div>
<!-- <input type="button" value="上傳" id="upload"/> -->
</div>
</div> 因為我用的是自動上傳,所以注釋了上傳按鈕,upload3.js里也注釋了相對的上傳按鈕的點擊方法.
2.真正的上傳組件代碼是upload3.js,里面介紹了webuploader的初始化,分片,各種參數(shù),具體可以參考官網(wǎng)上的API
/*********************************WebUpload 單文件上傳 begin*****************************************/
$(function(){
var $list = $("#thelist");
var uploader ;// 實例化
uploader = WebUploader.create({
auto:true, //是否自動上傳
pick: {
id: '#attach',
name:"multiFile", //這個地方 name 沒什么用，和fileVal 配合使用。
label: '點擊選擇文件,會自動上傳',
multiple:false //默認為true，true表示可以多選文件，HTML5的屬性
},
swf: '../Uploader.swf', //在這里必需要引入swf文件，webuploader初始化要用
fileVal:'multiFile', //提交到到后臺，是要用"multiFile"這個名稱屬性來取文件的
server: "myPractice/webUploader.do",
duplicate:true,//是否可重復選擇同一文件
resize: false,
chunked: true, //分片處理
chunkSize: 20 * 1024 * 1024, //每片20M
chunkRetry:2,//如果失敗，則不重試
threads:1,//上傳并發(fā)數(shù)。允許同時最大上傳進程數(shù)。
fileNumLimit:1,//上傳的文件總數(shù)
// 禁掉全局的拖拽功能。
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>" );
});
//當所有文件上傳結束時觸發(fā)
uploader.on("uploadFinished",function(){
console.log("uploadFinished:");
})
//當文件上傳成功時觸發(fā)。
uploader.on( "uploadSuccess", function( file ,response) {
// alert(file.name);
$( "#"+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();
});
//如果是手動上傳,用下面的事件,并啟用jsp頁面上的上傳按鈕
// $("#upload").on("click", function() {
// uploader.upload();
// })
});
/*********************************WebUpload 單文件上傳 end*******************************************/ 3.前臺之后,需要找到后臺Java代碼,實現(xiàn)上傳到服務器的功能,webuploader組件中server屬性就是指向服務端代碼:
@Controller
@RequestMapping(value="/myPractice")<span style="font-family: Arial, Helvetica, sans-serif;">//這里就是表明上傳組件怎么通過server屬性找到后端代碼的,不要太在意細節(jié)</span>
public class MyPracticeController extends BaseController {
<span> </span>
@RequestMapping(method = {RequestMethod.POST}, value = {"/webUploader"})
@ResponseBody
public void webUploader(HttpServletRequest request, HttpServletResponse response) throws Exception {
try {
boolean isMultipart = ServletFileUpload.isMultipartContent(request);
if (isMultipart) {
FileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);
// 得到所有的表單域，它們目前都被當作FileItem
List<FileItem> fileItems = upload.parseRequest(request);
String id = "";
String fileName = "";
// 如果大于1說明是分片處理
int chunks = 1;
int chunk = 0;
FileItem tempFileItem = null;
for (FileItem fileItem : fileItems) {
if (fileItem.getFieldName().equals("id")) {
id = fileItem.getString();
} else if (fileItem.getFieldName().equals("name")) {
fileName = new String(fileItem.getString().getBytes("ISO-8859-1"), "UTF-8");
} else if (fileItem.getFieldName().equals("chunks")) {
chunks = NumberUtils.toInt(fileItem.getString());
} else if (fileItem.getFieldName().equals("chunk")) {
chunk = NumberUtils.toInt(fileItem.getString());
} else if (fileItem.getFieldName().equals("multiFile")) {
tempFileItem = fileItem;
}
}
//session中的參數(shù)設置獲取是我自己的原因,文件名你們可以直接使用fileName,這個是原來的文件名
String fileSysName = this.getRequest().getSession().getAttribute("fileSysName").toString();
String realname = fileSysName+fileName.substring(fileName.lastIndexOf("."));//轉化后的文件名
this.getRequest().getSession().setAttribute("realname",realname);
String filePath = Const.VIDEOPATHFILE + "sound/";//文件上傳路徑
// 臨時目錄用來存放所有分片文件
String tempFileDir = filePath + id;
File parentFileDir = new File(tempFileDir);
if (!parentFileDir.exists()) {
parentFileDir.mkdirs();
}
// 分片處理時，前臺會多次調用上傳接口，每次都會上傳文件的一部分到后臺
File tempPartFile = new File(parentFileDir, realname + "_" + chunk + ".part");
FileUtils.copyInputStreamToFile(tempFileItem.getInputStream(), tempPartFile);
// 是否全部上傳完成
// 所有分片都存在才說明整個文件上傳完成
boolean uploadDone = true;
for (int i = 0; i < chunks; i++) {
File partFile = new File(parentFileDir, realname + "_" + i + ".part");
if (!partFile.exists()) {
uploadDone = false;
}
}
// 所有分片文件都上傳完成
// 將所有分片文件合并到一個文件中
if (uploadDone) {
// 得到 destTempFile 就是最終的文件
File destTempFile = new File(filePath, realname);
for (int i = 0; i < chunks; i++) {
File partFile = new File(parentFileDir, realname + "_" + i + ".part");
FileOutputStream destTempfos = new FileOutputStream(destTempFile, true);
//遍歷"所有分片文件"到"最終文件"中
FileUtils.copyFile(partFile, destTempfos);
destTempfos.close();
}
// 刪除臨時目錄中的分片文件
FileUtils.deleteDirectory(parentFileDir);
} else {
// 臨時文件創(chuàng)建失敗
if (chunk == chunks -1) {
FileUtils.deleteDirectory(parentFileDir);
}
}
}
} catch (Exception e) {
logger.error(e.getMessage(), e);
}
} 到這里基本完了,webuploader前后臺設計的代碼就這些,
Uploader.swf
<pre name="code" class="html">webuploader.min.js</pre><pre name="code" class="html"><pre name="code" class="html">webuploader.js</pre><pre name="code" class="html">webuploader.css</pre><pre name="code" class="html">這4個公共文件從官網(wǎng)可以下載,都一樣. <pre name="code" class="plain">最后,文件上傳后頁面樣式是</pre><pre name="code" class="plain"><pre name="code" class="html"><img src="http://img.blog.csdn.net/20170418112230338?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2FuZ2xvbmcxOTkwNDIx/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt=""> </pre> <pre></pre> <pre></pre> <pre></pre> <pre></pre> <p></p> <pre></pre> <pre></pre> <pre></pre> <pre></pre> <pre></pre> <pre></pre> <pre></pre> <pre></pre> </pre></pre></pre>
以上所述是小編給大家介紹的webuploader在springMVC+jquery+Java開發(fā)環(huán)境下的大文件分片上傳的實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
這篇文章主要介紹了Java對象布局(JOL)實現(xiàn)過程解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-04-04
java實現(xiàn)圖片上加文字水印(SpringMVC + Jsp)
這篇文章主要為大家詳細介紹了java實現(xiàn)在圖片上加文字水印的方法，水印可以是圖片或者文字，操作方便，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-05-05
java根據(jù)當前時間獲取yyyy-MM-dd?HH:mm:ss標準格式的時間代碼示例
在Java中可以使用java.time包中的LocalDateTime類和DateTimeFormatter類來獲取并格式化當前時間為yyyy-MM-dd?HH:mm:ss的格式,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-10-10
最近一直在用mybatis，由于需要使用到了動態(tài)sql，遇到了一些問題，現(xiàn)在來總結一下，經(jīng)驗教訓。下面這篇文章主要給大家總結介紹了mybatis注解與xml常用語句的相關資料，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考下2018-09-09
Spring Boot如何動態(tài)創(chuàng)建Bean示例代碼
這篇文章主要給大家介紹了關于Spring Boot如何動態(tài)創(chuàng)建Bean的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。2017-09-09
這篇文章主要介紹了Mybatis插件擴展及與Spring整合原理，本文通過實例文字相結合給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-07-07
這篇文章主要介紹了Java并發(fā)編程之volatile變量介紹,volatile提供了弱同步機制,用來確保將變量更新通知到其它線程,需要的朋友可以參考下2015-04-04
這篇文章主要介紹了JAVA中的Configuration類詳解，具有一定借鑒價值,需要的朋友可以參考下2018-01-01
java使用ffmpeg實現(xiàn)上傳視頻的轉碼提取視頻的截圖等功能(代碼操作)
這篇文章主要介紹了java使用ffmpeg實現(xiàn)上傳視頻的轉碼，提取視頻的截圖等功能,本文圖文并茂給大家介紹的非常詳細，對大家的工作或學習具有一定的參考借鑒價值，需要的朋友可以參考下2020-03-03
Java 9引入了一個新的靜態(tài)工廠方法List.of(),用于創(chuàng)建不可變的列表對象,這篇文章主要介紹了Java?9中List.of()的使用示例及注意事項的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-03-03