寫在前面：
文件上傳方式很多的，對於大文件的上傳，在本次項目中也有涉及，主要是用了分片斷點上傳大文件。所以就去了解了一下WebUploader，先從簡單的上傳文件開始吧~
在代碼中寫注釋，這樣看的比較好點，那就直接上代碼來看了解實現的過程吧。
前台jsp頁面：
<%@ 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(); //網站的訪問跟路徑 String baseURL = scheme + "://" + serverName + ":" + port + contextPath; request.setAttribute("baseURL", baseURL); %> <html> <head> <title>WebUploader文件上傳簡單示例</title> <%--引入css樣式--%> <link href="${baseURL}/webuploader0.1.5/webuploader.css" rel="stylesheet" type="text/css"/> <script src="${baseURL}/ligerui2/jquery/jquery-1.9.0.min.js" type="text/javascript"></script> <%--引入文件上傳插件--%> <script type="text/javascript" src="${baseURL}/webuploader0.1.5/webuploader.min.js"></script> <script type="text/javascript"> $(function(){ /* 對於uploader的創建，最好等dom元素也就是下面的div創建好之后再創建，因為里面有用到選擇文件按鈕， 不然會創建報錯，這是很容易忽視的地方，故這里放到$(function(){}來進行創建*/ var uploader = WebUploader.create({ // swf文件路徑 swf: '${baseURL}/webuploader0.1.5/Uploader.swf', // 文件接收服務端。 server: '${baseURL}/uploadFile', // [默認值：'file'] 設置文件上傳域的name。 fileVal:'upload', // 選擇文件的按鈕。可選。 // 內部根據當前運行是創建，可能是input元素，也可能是flash. pick: { multiple: false, id: '#filePicker' }, // 上傳並發數。允許同時最大上傳進程數[默認值：3] 即上傳文件數 threads: 1, // 自動上傳修改為手動上傳 //auto: true, //是否要分片處理大文件上傳。 //chunked: true, // 如果要分片，分多大一片？ 默認大小為5M. //chunkSize: 5 * 1024 * 1024, // 不壓縮image, 默認如果是jpeg，文件上傳前會壓縮一把再上傳！ //resize: false }); //當有文件添加進來的時候 uploader.on('fileQueued', function (file) { //具體邏輯根據項目需求來寫 這里只是簡單的舉個例子寫下 $one = $("<div >"+file.name+"</div>"); $("#fileList").append($one); }); // 文件上傳過程中創建進度條實時顯示。 uploader.on('uploadProgress', function (file, percentage) { // 具體邏輯... }); // 文件上傳成功處理。 uploader.on('uploadSuccess', function (file, response) { // 具體邏輯... console.log('upload success...\n'); }); // 文件上傳失敗處理。 uploader.on('uploadError', function (file) { // 具體邏輯... }); // 上傳傳完畢，不管成功失敗都會調用該事件，主要用於關閉進度條 uploader.on('uploadComplete', function (file) { // 具體邏輯... }); //點擊上傳按鈕觸發事件 $("#btnClick").click(function(){ uploader.upload(); }); }); </script> </head> <body style="padding:10px"> <div id="layout1"> <div id="uploader-demo"> <%--用來裝 顯示上傳文件名稱的div--%> <div id="fileList" class="uploader-list"></div> <div id="filePicker" >選擇文件</div> <button id="btnClick">開始上傳</button> </div> </div> </body> </html>
后台action:
/** * Description:com.ims.action * Author: Eleven * Date: 2017/12/26 10:50 */ @Controller("FileAction") public class FileAction extends BaseAction{ //記得提供對應的get set方法 //上傳文件對象(和表單type=file的name值一致，在jsp頁面我們指定了fileVal:'upload',) private File upload; //文件名 private String uploadFileName; //上傳類型 private String uploadContentType; public void uploadFile() throws Exception{ String str = "D:/upload33/"; //文件保存路徑 System.out.println("文件路徑===="+uploadFileName); String realPath = str + uploadFileName; File tmp =new File(realPath); FileUtils.copyFile(upload, tmp); System.out.println("上傳文件"+uploadFileName+",大小："+(upload.length()/1024/1024)+"M"); } 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文件的配置：
<action name="uploadFile" class="FileAction" method="uploadFile"> </action>
現在可以運行了，這個只是用WebUploader來實現的一個最基本的文件上傳了。在jsp頁面跟后台action中，都談不上有什么邏輯，也不是很完整。因為項目不同，業務流程也不同，故可以先入門，后續根據自己的需求，進行添加的。
運行截圖：
明天繼續，實現分片斷點上傳。