jQuery(function() {
 var $ = jQuery,
  $list = $('#thelist'),
  $btn = $('#ctlBtn'),
  state = 'pending',
  uploader;

 //初始化，實(shí)際上可直接訪問Webuploader.upLoader
 uploader = WebUploader.create({

  // 不壓縮image
  resize: false,

  // swf文件路徑
  swf: BASE_URL + '/js/Uploader.swf',

  // 發(fā)送給后臺(tái)代碼進(jìn)行處理，保存到服務(wù)器上
  server: 'http://webuploader.duapp.com/server/fileupload.php',

  // 選擇文件的按鈕。可選。
  // 內(nèi)部根據(jù)當(dāng)前運(yùn)行是創(chuàng)建，可能是input元素，也可能是flash.
  pick: '#picker'
 });

 // uploader添加事件，當(dāng)文件被加入隊(duì)列后觸發(fā)
 uploader.on( 'fileQueued', function( file ) {
 //在加入隊(duì)列時(shí)，創(chuàng)建一個(gè)樣式，供后面上傳成功失敗等等調(diào)用，定義一個(gè)*p表示指向該事件樣式
  $list.append( '<div id="' + file.id + '" class="item">' +
   '<h4 class="info">' + file.name + '</h4>' +
   '<p class="state">等待上傳...</p>' +
  '</div>' );
 });

 // 文件上傳過程中觸發(fā)，攜帶上傳進(jìn)度，file表示上傳的文件，percentage表示上傳的進(jìn)度
 uploader.on( 'uploadProgress', function( file, percentage ) {
 //定義一個(gè)變量名創(chuàng)建進(jìn)度模塊
  var $li = $( '#'+file.id ),
 //找到$li下class為progress的，并定義為$percent------為什么先尋找在創(chuàng)建
   $percent = $li.find('.progress .progress-bar');

  //如果$percent沒值，就創(chuàng)建進(jìn)度條加入到對(duì)應(yīng)的文件名下， 避免重復(fù)創(chuàng)建
  if ( !$percent.length ) {
   $percent = $('<div class="progress progress-striped active">' +
    '<div class="progress-bar" role="progressbar" style="width: 0%">' +
    '</div>' +
   '</div>').appendTo( $li ).find('.progress-bar');
  }
 
 //為進(jìn)度模塊添加彈出文本
  $li.find('p.state').text('上傳中');
 
 //為進(jìn)度模塊創(chuàng)建讀條的百分比
  $percent.css( 'width', percentage * 100 + '%' );
 });

 //uploader觸發(fā)事件，當(dāng)上傳成功事調(diào)用這個(gè)事件
 uploader.on( 'uploadSuccess', function( file ) {
 //調(diào)用文件被加入時(shí)觸發(fā)的事件，findstate，并添加文本為已上傳
  $( '#'+file.id ).find('p.state').text('已上傳');
 });

 //uploader觸發(fā)事件，當(dāng)上傳失敗時(shí)觸發(fā)該事件
 uploader.on( 'uploadError', function( file ) {
 //調(diào)用文件被加入時(shí)觸發(fā)的事件，findstate，并添加文本為上傳出錯(cuò)
  $( '#'+file.id ).find('p.state').text('上傳出錯(cuò)');
 });
 
 //該事件表示不管上傳成功還是失敗都會(huì)觸發(fā)該事件
 uploader.on( 'uploadComplete', function( file ) {
 //調(diào)用
  $( '#'+file.id ).find('.progress').fadeOut();
 });

 //這是一個(gè)特殊事件，所有的觸發(fā)都會(huì)響應(yīng)到，type的作用是記錄當(dāng)前是什么事件在觸發(fā)，并給state賦值
 uploader.on( 'all', function( type ) {
  if ( type === 'startUpload' ) {
   state = 'uploading';
  } else if ( type === 'stopUpload' ) {
   state = 'paused';
  } else if ( type === 'uploadFinished' ) {
   state = 'done';
  }
 
 //根據(jù)state判斷彈出文本
  if ( state === 'uploading' ) {
   $btn.text('暫停上傳');
  } else {
   $btn.text('開始上傳');
  }
 });
 
 //當(dāng)按鈕被點(diǎn)擊時(shí)觸發(fā)，根據(jù)狀態(tài)開始上傳或是暫停
 $btn.on( 'click', function() {
  if ( state === 'uploading' ) {
   uploader.stop();
  } else {
   uploader.upload();
  }
 });
});

jQuery(function() {

 //將jquery賦值給一個(gè)全局的變量
 var $ = jQuery,

  $list = $('#fileList'),
  // 優(yōu)化retina, 在retina下這個(gè)值是2，設(shè)備像素比
  ratio = window.devicePixelRatio || 1,

  // 縮略圖大小
  thumbnailWidth = 100 * ratio,
  thumbnailHeight = 100 * ratio,

  // Web Uploader實(shí)例
  uploader;

 // 初始化Web Uploader
 uploader = WebUploader.create({

  // 自動(dòng)上傳。
  auto: true,

  // swf文件路徑
  swf: BASE_URL + '/js/Uploader.swf',

  // 文件接收服務(wù)端。調(diào)用代碼，把圖片保存在服務(wù)器端
  server: 'http://webuploader.duapp.com/server/fileupload.php',

  // 選擇文件的按鈕?？蛇x。
  // 內(nèi)部根據(jù)當(dāng)前運(yùn)行是創(chuàng)建，可能是input元素，也可能是flash.
  pick: '#filePicker',

  // 只允許選擇文件，可選。
  accept: {
   title: 'Images',
   extensions: 'gif,jpg,jpeg,bmp,png',
   mimeTypes: 'image/*'
  }
 });

 // 當(dāng)有文件添加進(jìn)來的時(shí)候觸發(fā)這個(gè)事件
 uploader.on( 'fileQueued', function( file ) {
 //定義變量li
  var $li = $(
 //創(chuàng)建一個(gè)id
    '<div id="' + file.id + '" class="file-item thumbnail">' +
     '<img>' +
  //創(chuàng)建一個(gè)為info的class
     '<div class="info">' + file.name + '</div>' +
    '</div>'
    ),
   $img = $li.find('img');
 
 //把定義的li加入到list中
  $list.append( $li );

  // 創(chuàng)建縮略圖，此過程為異步，需要傳入callBack（function( error, src ))，通常在圖片加入隊(duì)列后調(diào)用此方法，以增強(qiáng)交互性
 //callback有兩個(gè)參數(shù)，當(dāng)失敗時(shí)調(diào)用error，src存放的是縮略圖的地址
  uploader.makeThumb( file, function( error, src ) {
   if ( error ) {
    $img.replaceWith('<span>不能預(yù)覽</span>');
    return;
   }

   $img.attr( 'src', src );
  }, thumbnailWidth, thumbnailHeight );
 });

 // 文件上傳過程中創(chuàng)建進(jìn)度條實(shí)時(shí)顯示。
 uploader.on( 'uploadProgress', function( file, percentage ) {
  var $li = $( '#'+file.id ),
   $percent = $li.find('.progress span');

  // 避免重復(fù)創(chuàng)建
  if ( !$percent.length ) {
   $percent = $('<p class="progress"><span></span></p>')
     .appendTo( $li )
     .find('span');
  }

  $percent.css( 'width', percentage * 100 + '%' );
 });

 // 文件上傳成功，給item添加成功class, 用樣式標(biāo)記上傳成功。
 uploader.on( 'uploadSuccess', function( file ) {
  $( '#'+file.id ).addClass('upload-state-done');
 });

 // 文件上傳失敗，現(xiàn)實(shí)上傳出錯(cuò)。
 uploader.on( 'uploadError', function( file ) {
  var $li = $( '#'+file.id ),
   $error = $li.find('div.error');

  // 避免重復(fù)創(chuàng)建
  if ( !$error.length ) {
   $error = $('<div class="error"></div>').appendTo( $li );
  }

  $error.text('上傳失敗');
 });

 // 完成上傳完了，成功或者失敗，先刪除進(jìn)度條。
 uploader.on( 'uploadComplete', function( file ) {
  $( '#'+file.id ).find('.progress').remove();
 });
});

 ServletContext application = this.getServletContext();
 String tempDirectory = application.getRealPath(Constant.TEMP_DIRECTORY) + "/";
 String realDirectory = application.getRealPath(Constant.REAL_DIRECTORY) + "/";

List<FileItem> list = upload.parseRequest(request);
 Iterator<FileItem> iter = list.iterator();
 while (iter.hasNext()) {
 FileItem item = iter.next();
 //item.isFormField()用來判斷當(dāng)前對(duì)象是否是file表單域的數(shù)據(jù) 如果返回值是true說明不是 就是普通表單域
 if(item.isFormField()){
  System.out.println( "普通表單域" +item.getFieldName());
  System.out.println(item.getString("utf-8"));

 }else{
  //System.out.println("file表單域" + item.getFieldName());
  /*
  * 只有file表單域才將該對(duì)象中的內(nèi)容寫到真實(shí)文件夾中 
  */
  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 {
 
 //將請(qǐng)求消息中的每一個(gè)項(xiàng)目封裝成單獨(dú)DiskFileItem對(duì)象的任務(wù)
 //當(dāng)上傳的文件項(xiàng)目比較小時(shí)保存在內(nèi)存中，比較大時(shí)保存在磁盤零時(shí)文件夾中
 //建立文件倉(cāng)庫(kù)(工廠)
 FileItemFactory factory = new DiskFileItemFactory();
 ServletFileUpload servletFileUpload = new ServletFileUpload(factory);
 //對(duì)上傳的文件進(jìn)行設(shè)定
 servletFileUpload.setSizeMax(1024 * 1024 * 2);// 最大2M數(shù)據(jù)
 servletFileUpload.setFileSizeMax(2 * 1024 * 1024);

 servletFileUpload.setHeaderEncoding("UTF-8");// 解決文件名亂碼的問題
 
 //解析請(qǐng)求正文，獲取上傳文件，不拋出異常則寫入真實(shí)路徑
 //根據(jù)請(qǐng)求獲取文件列表
 List<FileItem> fileItemsList = servletFileUpload.parseRequest(req);
 //從文件列表中取出單獨(dú)的文件對(duì)象
 for (FileItem item : fileItemsList) {
 //判斷該文件是否是普通的表單類型，該處是file類型進(jìn)入判斷
 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 = "";
 //內(nèi)容的類型
 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;
 // 定義文件路徑，根據(jù)你的文件夾結(jié)構(gòu)，可能需要做修改
 if (t.equals("1")) {
 path = "upload/ev/" + fileName;
 } else {
 path = "upload/pk/" + fileName;
 }

 // 保存文件到服務(wù)器上
 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 {
 // 響應(yīng)客戶端
 // resp.setContentType("text/html; charset=UTF-8");
 // resp.getWriter().write(ob.toString());
 }
 }
}