首先把地址甩出來，http://fex-team.github.io/webuploader/
裡面有比較完整的demo案例文檔，本文主要是基於文件上傳和圖片上傳增加了大量的註釋，基本保證了每行代碼都有註釋以助於理解，是對官網demo的增強版，希望可以幫助大家更好的理解該插件
首先是文件上傳
jQuery(function() { var $ = jQuery, $list = $('#thelist'), $btn = $('#ctlBtn'), state = 'pending', uploader; //初始化，實際上可直接訪問Webuploader.upLoader uploader = WebUploader.create({ // 不壓縮image resize: false, // swf文件路徑swf: BASE_URL + '/js/Uploader.swf', // 發送給後台代碼進行處理，保存到服務器上server: 'http://webuploader.duapp.com/server/fileupload.php', // 選擇文件的按鈕。可選。 // 內部根據當前運行是創建，可能是input元素，也可能是flash. pick: '#picker' }); // uploader添加事件，當文件被加入隊列後觸發uploader.on( 'fileQueued', function( file ) { //在加入隊列時，創建一個樣式，供後面上傳成功失敗等等調用，定義一個*p表示指向該事件樣式$list.append( '<div id="' + file.id + '">' + '<h4>' + file.name + '</h4>' + '<p>等待上傳...</p>' + '</div>' ); }); // 文件上傳過程中觸發，攜帶上傳進度，file表示上傳的文件，percentage表示上傳的進度uploader.on( 'uploadProgress', function( file, percentage ) { //定義一個變量名創建進度模塊var $li = $( '#'+file.id ), //找到$li下class為progress的，並定義為$percent------為什麼先尋找在創建$percent = $li.find('.progress .progress-bar'); //如果$percent沒值，就創建進度條加入到對應的文件名下， 避免重複創建if ( !$percent.length ) { $percent = $('<div>' + '<div role="progressbar">' + '</div>' + '</div>').appendTo( $li ).find('.progress-bar'); } //為進度模塊添加彈出文本$li.find('p.state').text('上傳中'); //為進度模塊創建讀條的百分比$percent.css( 'width', percentage * 100 + '%' ); }); //uploader觸發事件，當上傳成功事調用這個事件uploader.on( 'uploadSuccess', function( file ) { //調用文件被加入時觸發的事件，findstate，並添加文本為已上傳$( '#'+file.id ).find('p.state').text('已上傳'); }); //uploader觸發事件，當上傳失敗時觸發該事件uploader.on( 'uploadError', function( file ) { //調用文件被加入時觸發的事件，findstate，並添加文本為上傳出錯$( '#'+file.id ).find('p.state').text('上傳出錯'); }); //該事件表示不管上傳成功還是失敗都會觸發該事件uploader.on( 'uploadComplete', function( file ) { //調用$( '#'+file.id ).find('.progress').fadeOut(); }); //這是一個特殊事件，所有的觸發都會響應到，type的作用是記錄當前是什麼事件在觸發，並給state賦值uploader.on( 'all', function( type ) { if ( type === 'startUpload' ) { state = 'uploading'; } else if ( type === 'stopUpload' ) { state = 'paused'; } else if ( type === 'uploadFinished' ) { state = 'done'; } //根據state判斷彈出文本if ( state === 'uploading' ) { $btn.text('暫停上傳'); } else { $btn.text('開始上傳'); } }); //當按鈕被點擊時觸發，根據狀態開始上傳或是暫停$btn.on( 'click', function() { if ( state === 'uploading' ) { uploader.stop(); } else { uploader.upload(); } });});然後是圖片上傳
jQuery(function() { //將jquery賦值給一個全局的變量var $ = jQuery, $list = $('#fileList'), // 優化retina, 在retina下這個值是2，設備像素比ratio = window.devicePixelRatio || 1, // 縮略圖大小thumbnailWidth = 100 * ratio, thumbnailHeight = 100 * ratio, // Web Uploader實例uploader; // 初始化Web Uploader uploader = WebUploader.create({ // 自動上傳。 auto: true, // swf文件路徑swf: BASE_URL + '/js/Uploader.swf', // 文件接收服務端。調用代碼，把圖片保存在服務器端server: 'http://webuploader.duapp.com/server/fileupload.php', // 選擇文件的按鈕。可選。 // 內部根據當前運行是創建，可能是input元素，也可能是flash. pick: '#filePicker', // 只允許選擇文件，可選。 accept: { title: 'Images', extensions: 'gif,jpg,jpeg,bmp,png', mimeTypes: 'image/*' } }); // 當有文件添加進來的時候觸發這個事件uploader.on( 'fileQueued', function( file ) { //定義變量li var $li = $( //創建一個id '<div id="' + file.id + '">' + '<img>' + //創建一個為info的class '<div>' + file.name + '</div>' + '</div>' ), $img = $li.find('img'); //把定義的li加入到list中$list.append( $li ); // 創建縮略圖，此過程為異步，需要傳入callBack（function( error, src ))，通常在圖片加入隊列後調用此方法，以增強交互性//callback有兩個參數，當失敗時調用error，src存放的是縮略圖的地址uploader.makeThumb( file, function( error, src ) { if ( error ) { $img.replaceWith('<span>不能預覽</span>'); return; } $img.attr( 'src', src ); }, thumbnailWidth, thumbnailHeight ); }); // 文件上傳過程中創建進度條實時顯示。 uploader.on( 'uploadProgress', function( file, percentage ) { var $li = $( '#'+file.id ), $percent = $li.find('.progress span'); // 避免重複創建if ( !$percent.length ) { $percent = $('<p><span></span></p>') .appendTo( $li ) .find('span'); } $percent.css( 'width', percentage * 100 + '%' ); }); // 文件上傳成功，給item添加成功class, 用樣式標記上傳成功。 uploader.on( 'uploadSuccess', function( file ) { $( '#'+file.id ).addClass('upload-state-done'); }); // 文件上傳失敗，現實上傳出錯。 uploader.on( 'uploadError', function( file ) { var $li = $( '#'+file.id ), $error = $li.find('div.error'); // 避免重複創建if ( !$error.length ) { $error = $('<div></div>').appendTo( $li ); } $error.text('上傳失敗'); }); // 完成上傳完了，成功或者失敗，先刪除進度條。 uploader.on( 'uploadComplete', function( file ) { $( '#'+file.id ).find('.progress').remove(); });});下面是java的後台代碼，用於獲取上傳文件，並將上傳文件的真實路徑寫入服務器
1.首先我們應該為上傳的文件建一個存放的位置，一般位置分為臨時和真是文件夾，那我們就需要獲取這倆個文件夾的絕對路徑，在servlet中我們可以這樣做
ServletContext application = this.getServletContext(); String tempDirectory = application.getRealPath(Constant.TEMP_DIRECTORY) + "/"; String realDirectory = application.getRealPath(Constant.REAL_DIRECTORY) + "/";
然後建立文件工廠即倉庫一個參數表示存放多大後flush，
複製代碼代碼如下:FileItemFactory factory = new DiskFileItemFactory(Constant.SIZE_THRESHOLD,new File(tempDirectory));
ServletFileUpload upload = new ServletFileUpload(factory);
2.對上傳的文件進行設定
upload.setSizeMax(500*1024*1024);//設置該次上傳最大值為500M3,.解析請求正文，獲取上傳文件，不拋出異常則寫入真是路徑
List<FileItem> list = upload.parseRequest(request); Iterator<FileItem> iter = list.iterator(); while (iter.hasNext()) { FileItem item = iter.next(); //item.isFormField()用來判斷當前對像是否是file表單域的數據如果返回值是true說明不是就是普通表單域if(item.isFormField()){ System.out.println( "普通表單域" +item.getFieldName()); System.out.println(item.getString("utf-8")); }else{ //System.out.println("file表單域" + item.getFieldName()); /* * 只有file表單域才將該對像中的內容寫到真實文件夾中*/ String lastpath = item.getName();//獲取上傳文件的名稱lastpath = lastpath.substring(lastpath.lastIndexOf(".")); String filename = UUID.randomUUID().toString().replace("-", "") + lastpath; item.write(new File(realDirectory+filename)); package com.lanyou.support.servlet;import java.io.File;import java.io.IOException;import java.io.PrintWriter;import java.util.List;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import net.sf.json.JSONObject;import org.apache.commons.fileupload.FileItem;import org.apache.commons.fileupload.FileItemFactory;import org.apache.commons.fileupload.disk.DiskFileItemFactory;import org.apache.commons.fileupload.servlet.ServletFileUpload;import org.apache.commons.logging.Log;import org.apache.commons.logging.LogFactory;import org.apache.struts2.ServletActionContext;public class FileUpload extends HttpServlet { private static final long serialVersionUID = 1L; private static Log logger = LogFactory.getLog(FileUpload.class); @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { doPost(req, resp); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { // 類型1事件上傳文件2apk String t = req.getParameter("t") == null ? "1" : req.getParameter("t") .trim(); String path = ""; JSONObject ob = new JSONObject(); try { //將請求消息中的每一個項目封裝成單獨DiskFileItem對象的任務//當上傳的文件項目比較小時保存在內存中，比較大時保存在磁盤零時文件夾中//建立文件倉庫(工廠) FileItemFactory factory = new DiskFileItemFactory(); ServletFileUpload servletFileUpload = new ServletFileUpload(factory); //對上傳的文件進行設定servletFileUpload.setSizeMax(1024 * 1024 * 2);// 最大2M數據servletFileUpload.setFileSizeMax(2 * 1024 * 1024); servletFileUpload.setHeaderEncoding("UTF-8");// 解決文件名亂碼的問題//解析請求正文，獲取上傳文件，不拋出異常則寫入真實路徑//根據請求獲取文件列表List<FileItem> fileItemsList = servletFileUpload.parseRequest(req); //從文件列表中取出單獨的文件對象for (FileItem item : fileItemsList) { //判斷該文件是否是普通的表單類型，該處是file類型進入判斷if (!item.isFormField()) { //如果上傳的文件大於指定的大小則return if (item.getSize() > 2 * 1024 * 1024) { return; } // System.out.println("上傳文件的大小："+item.getSize()); // System.out.println("上傳文件的類型："+item.getContentType()); // System.out.println("上傳文件的名稱："+item.getName()); //上傳文件的名稱String fileName = item.getName(); String ent = ""; //內容的類型if (item.getContentType().equalsIgnoreCase("image/x-png") || item.getContentType().equalsIgnoreCase( "image/png")) { ent = ".png"; } else if (item.getContentType().equalsIgnoreCase( "image/gif")) { ent = ".gif"; } else if (item.getContentType().equalsIgnoreCase( "image/bmp")) { ent = ".bmp"; } else if (item.getContentType().equalsIgnoreCase( "image/pjpeg") || item.getContentType().equalsIgnoreCase( "image/jpeg")) { ent = ".jpg"; } //獲取文件的是那種格式if (fileName.lastIndexOf(".") != -1) { ent = fileName.substring(fileName.lastIndexOf(".")); } fileName = "ev_" + System.currentTimeMillis() + ent; // 定義文件路徑，根據你的文件夾結構，可能需要做修改if (t.equals("1")) { path = "upload/ev/" + fileName; } else { path = "upload/pk/" + fileName; } // 保存文件到服務器上File file = new File(req.getSession().getServletContext() .getRealPath(path)); if (!file.getParentFile().exists()) { file.getParentFile().mkdirs(); } item.write(file); // logger.info(path); // break; ob.accumulate("url", path); } } resp.setContentType("text/html; charset=UTF-8"); resp.getWriter().write(ob.toString()); } catch (Exception e) { e.printStackTrace(); } finally { // 響應客戶端// resp.setContentType("text/html; charset=UTF-8"); // resp.getWriter().write(ob.toString()); } }}以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。