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的初始化,分片,各種參數,具體可以參考官網上的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ā)數。允許同時最大上傳進程數。
fileNumLimit:1,//上傳的文件總數
// 禁掉全局的拖拽功能。
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中的參數設置獲取是我自己的原因,文件名你們可以直接使用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個公共文件從官網可以下載,都一樣. <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)境下的大文件分片上傳的實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
Springboot如何使用OSHI獲取和操作系統(tǒng)和硬件信息
這篇文章主要介紹了Springboot如何使用OSHI獲取和操作系統(tǒng)和硬件信息問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
在 Spring Boot 中,你可以將 Hutool 生成驗證碼的功能集成到 RESTful API 接口中,這篇文章主要介紹了Springboot整合hutool驗證碼,需要的朋友可以參考下2024-08-08
數據庫連接池在編寫應用服務是經常需要用到的模塊，太過頻繁的連接數據庫對服務性能來講是一個瓶頸，使用緩沖池技術可以來消除這個瓶頸，本文就來介紹Java常見的幾種，感興趣的可以了解一下2021-05-05
這篇文章主要給大家介紹了關于java中char類型轉換成int類型的2種方法,因為java是一門強類型語言,所以在數據運算中會存在類型轉換,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了JavaWeb pageContext對象原理解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-02-02
這篇文章主要介紹了Spring中事務幾個常見的問題解決，事務這個概念是數據庫層面的，Spring只是基于數據庫中的事務進行擴展，以及提供了一些能讓程序員更新方便操作事務的方式2022-08-08
Spring Boot利用@Async異步調用：使用Future及定義超時詳解
這篇文章主要給大家介紹了關于Spring Boot利用@Async異步調用：使用Future及定義超時的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用spring boot具有一定的參考學習價值，需要的朋友可以參考下2018-05-05
關于Nacos配置管理的統(tǒng)一配置管理、自動刷新詳解
這篇文章主要介紹了關于Nacos配置管理的統(tǒng)一配置管理、自動刷新詳解，Nacos是阿里的一個開源產品，是針對微服務架構中的服務發(fā)現(xiàn)、配置管理、服務治理的綜合型解決方案,需要的朋友可以參考下2023-05-05
這篇文章主要為大家詳細介紹了Java中實現(xiàn)替換集合中的元素的常見方法,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-02-02
springBoot解決static和@Component遇到的bug
這篇文章主要介紹了springBoot解決static和@Component遇到的bug，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-02-02