寫在前面:
讓客戶滿意是我們工作的目標(biāo),不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶,將通過(guò)不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴,公司提供的服務(wù)項(xiàng)目有:域名注冊(cè)、虛擬主機(jī)、營(yíng)銷軟件、網(wǎng)站建設(shè)、新疆網(wǎng)站維護(hù)、網(wǎng)站推廣。
這幾天,有去研究一下WebUploader上傳文件,前面的博客有記錄下使用WebUploader簡(jiǎn)單上傳文件的例子,今天就把分片斷點(diǎn)上傳的例子也記錄下吧,在博客園中,也查看了一些資料,基本上后臺(tái)處理數(shù)據(jù)都是用的Servlet,或者是SpringMVC,由于最近的項(xiàng)目一直都是Struts2,所以這里就用Struts2中的action來(lái)對(duì)數(shù)據(jù)進(jìn)行處理,達(dá)到分片上傳文件的效果。
1.什么是分片上傳?
顧名思義,就是把文件分成一片片,即讓一個(gè)文件,分割成好幾個(gè)小文件,然后再上傳。這樣做的好處是便于上傳大文件。
2.分片上傳大致思路:
1.前臺(tái)頁(yè)面,選擇文件,點(diǎn)擊按鈕進(jìn)行上傳。
2.WebUploader將上傳的文件,分割成指定的個(gè)數(shù),挨個(gè)發(fā)送到服務(wù)端后臺(tái)。
3.服務(wù)器接收分割后的小文件,并存儲(chǔ)到臨時(shí)文件夾下
4.服務(wù)器接收分割后的小文件完畢后,前臺(tái)頁(yè)面執(zhí)行上傳成功函數(shù)。
5.在上傳成功函數(shù)中,發(fā)送請(qǐng)求到服務(wù)器,請(qǐng)求合并小文件為一個(gè)整體的文件。
6.服務(wù)器后臺(tái)對(duì)文件進(jìn)行合并操作,合并完成后刪除存儲(chǔ)小文件的臨時(shí)文件。
了解了分片上傳的大致過(guò)程,下面直接上demo吧。
前臺(tái)頁(yè)面:
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <% String scheme = request.getScheme(); String serverName = request.getServerName(); String contextPath = request.getContextPath(); int port = request.getServerPort(); //網(wǎng)站的訪問(wèn)跟路徑 String baseURL = scheme + "://" + serverName + ":" + port + contextPath; request.setAttribute("baseURL", baseURL); %>WebUploader文件分片上傳簡(jiǎn)單示例 <%--引入css樣式--%> <%--引入文件上傳插件--%>選擇文件
后臺(tái)action:
/** * Description:com.ims.action * Author: Eleven * Date: 2017/12/26 10:50 */ @Controller("FileAction") public class FileAction { /*用于接收分割請(qǐng)求的每個(gè)小文件的相關(guān)參數(shù)*/ //記得提供對(duì)應(yīng)的get set方法 //上傳文件對(duì)象(和表單type=file的name值一致) private File upload; //文件名 private String uploadFileName; //上傳類型 private String uploadContentType; /** * 以下變量都是public,參數(shù)太多,不想設(shè)為private再去寫get,set方法了, * 就偷個(gè)懶直接用了public了 */ //文件分片序號(hào) public String chunk; public String guid;//合并與分割都有用到 //用于接收發(fā)送合并請(qǐng)求的相關(guān)參數(shù) public String fileName; //文件名 public String chunks; //分割數(shù)量 //當(dāng)進(jìn)行分片上傳文件的時(shí)候,每上傳一個(gè)小文件就會(huì)調(diào)用這個(gè)方法,這個(gè)就跟普通的保存文件沒啥區(qū)別的 public void uploadFile2() throws Exception{ String str = "D:/upload44/divide/"; //文件保存路徑 //保存每個(gè)小文件的路徑 String realPath = str + guid +"/" + chunk; File tmp =new File(realPath); FileUtils.copyFile(upload, tmp); System.out.println("上傳文件"+uploadFileName+",第幾塊:"+chunk+",大小:"+(upload.length()/1024/1024)+"M"); } //文件合并 public void mergeFile() throws Exception{ String path = "D:/upload44/merge/" ; //創(chuàng)建 合并文件夾 new File(path).mkdir(); //創(chuàng)建 合并后的文件 File newFile = new File(path + fileName); if(!newFile.exists()){ newFile.createNewFile(); } FileOutputStream outputStream = new FileOutputStream(newFile, true);//文件追加寫入 byte[] byt = new byte[10 * 1024 * 1024]; int len; FileInputStream temp = null;//分片文件 for (int i = 0; i < Integer.parseInt(chunks); i++) { //"D:/upload44/divide/" + guid + "/" + i 為保存分割后的小文件的路徑 temp = new FileInputStream(new File("D:/upload44/divide/" + guid + "/" + i)); while ((len = temp.read(byt)) != -1) { System.out.println(len); outputStream.write(byt, 0, len); } temp.close(); } //當(dāng)所有追加寫入都寫完 才可以關(guān)閉流 outputStream.close(); //刪除分片文件 String path3 = "D:/upload44/divide/" + guid; FileUtils.deleteDirectory(new File(path3));//刪除目錄下所有的內(nèi)容 System.out.println("success!guid=" + guid + ";chunks=" + chunks + ";fileName=" + fileName); } public File getUpload() { return upload; } public void setUpload(File upload) { this.upload = upload; } public String getUploadFileName() { return uploadFileName; } public void setUploadFileName(String uploadFileName) { this.uploadFileName = uploadFileName; } public String getUploadContentType() { return uploadContentType; } public void setUploadContentType(String uploadContentType) { this.uploadContentType = uploadContentType; } }
struts.xml配置:
好啦,到這里,一個(gè)簡(jiǎn)單的文件分片斷點(diǎn)上傳就完成了。
對(duì)了補(bǔ)充說(shuō)明下,后臺(tái)只是接收了一些簡(jiǎn)單的參數(shù)而已,而從前臺(tái)WebUploader傳遞過(guò)來(lái)的參數(shù)當(dāng)然不止上面那幾個(gè)了,所以,可以學(xué)會(huì)用F12調(diào)試模式,進(jìn)行查看發(fā)送的請(qǐng)求,以及相關(guān)的請(qǐng)求參數(shù),這里就不多說(shuō)了
運(yùn)行截圖:
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。