Layui_2.x_上傳插件使用

1、上傳類

package com.ebd.application.common.utils;

import java.awt.geom.AffineTransform;
import java.awt.image.AffineTransformOp;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Random;

import javax.imageio.ImageIO;
import javax.servlet.http.HttpServletRequest;

import org.apache.commons.lang3.StringUtils;
import org.springframework.web.multipart.MultipartFile;

public class FileUtils {
	
	public static final String UPLOAD_URL  = "c:/pp";
	
	/**
	 * 上傳圖片，圖片的名稱filename是根據時間+隨機數組裝成的
	 * @param file MultipartFile file
	 * @param request HttpServletRequest request,
	 * @param uploadDir 上傳的目的文件夾
	 * @return 返回文件的上傳地址 (uploadDir/filename)
	 */
	public static String upload(MultipartFile file, HttpServletRequest request,String uploadDir) {
		String logoUrl = null;
		if (file != null && !file.isEmpty()) {
			System.out.println(request.getSession().getServletContext());
			String filePath = request.getSession().getServletContext()
					.getRealPath(uploadDir);
			
			//目錄不存在時，新建目錄
			createDirectory(filePath);
			
			//獲得原圖片的後綴名
			String srcfilename = file.getOriginalFilename();
			String suffix=srcfilename.substring(srcfilename.lastIndexOf("."));
			//組裝新圖片的名稱
			 SimpleDateFormat dateFormat = new SimpleDateFormat("yyyyMMddHHmmssSSS");
		     String format = dateFormat.format(new Date());
		    
			String filename = format+ new Random().nextInt(1000000)+suffix;
			
			File destFile = new File(filePath, filename);
			//若是文件存在，繼續隨機名稱
			while(destFile.exists()){
				filename = format+ new Random().nextInt(1000000)+suffix;
				destFile = new File(filePath, filename);
			}
			
			try {
				file.transferTo(destFile);
				logoUrl = uploadDir + "/" + filename;
			} catch (IllegalStateException e) {
				e.printStackTrace();
			} catch (IOException e) {
				e.printStackTrace();
			}
		}
		return logoUrl;
	}
	
	/**
	 * 上傳文件，文件名爲源文件的名稱
	 * @param file
	 * @param request
	 * @param uploadDir
	 * @return 上傳文件的路徑:uploadDir + "/" + srcfilename
	 */
	public static String uploadFile(MultipartFile file, HttpServletRequest request,String uploadDir) {
		String logoUrl = null;
		if (file != null && !file.isEmpty()) {
			//獲取上傳文件夾的真實地址
			String dirPath = request.getSession().getServletContext()
					.getRealPath(uploadDir);
			
			//目錄不存在時，新建目錄
			createDirectory(dirPath);
			
			//獲得源文件的名稱
			String srcfilename = file.getOriginalFilename();
			
			//構建目標文件
			File destFile = new File(dirPath, srcfilename);
			try {
				//上傳文件
				file.transferTo(destFile);
				logoUrl = uploadDir + "/" + srcfilename;
			} catch (IllegalStateException e) {
				e.printStackTrace();
			} catch (IOException e) {
				e.printStackTrace();
			}
		}
		return logoUrl;
	}
	
	/**
	 * 新建目錄
	 * @param dirPath
	 */
	public static void createDirectory(String dirPath){
		if(StringUtils.isNotBlank(dirPath)){
			// 得到文件對象  
			File file = new File(dirPath);
			if(!file.exists()){
				// 若是路徑不存在,則建立  
				file.mkdirs();
			}
		}
	}
	
	/** 
	 * 刪除單個文件 
	 * @param   path    被刪除文件的文件名 
	 * @return 單個文件刪除成功返回true，不然返回false 
	 */  
	public static boolean deleteFile(String path){
		boolean flag = false;
		File file = new File(path);
		// 路徑爲文件且不爲空則進行刪除  
		if(file.isFile() && file.exists()){
			file.delete();
			flag = true;
		}
		
		return flag;
	}
	
	/**
     * 生產縮略圖
     * @param src 原圖
     * @param dir 縮略圖
     * @param fileName 縮略圖名稱
     * @return
     */
    public static String thumb(File src,File dir,String fileName,int nw,int nh){
    	
    	 try {  
             /* 
             AffineTransform 類表示 2D 仿射變換，它執行從 2D 座標到其餘 2D 
                                      座標的線性映射，保留了線的「直線性」和「平行性」。可使用一系 
                                      列平移、縮放、翻轉、旋轉和剪切來構造仿射變換。 
             */  
             AffineTransform transform = new AffineTransform();
             //讀取圖片  
             BufferedImage bis = ImageIO.read(src); 
             int w = bis.getWidth();  
             int h = bis.getHeight();  
             double sx = (double)nw/w;  
             double sy = (double)nh/h;  
             //將此變換設置爲縮放變換。  
             transform.setToScale(sx,sy); 
             /* 
              * AffineTransformOp類使用仿射轉換來執行從源圖像或 Raster 中 2D 座標到目標圖像或 
              * Raster 中 2D 座標的線性映射。所使用的插值類型由構造方法經過 
              * 一個 RenderingHints 對象或經過此類中定義的整數插值類型之一來指定。 
			  * 若是在構造方法中指定了 RenderingHints 對象，則使用插值提示和呈現 
			  * 的質量提示爲此操做設置插值類型。要求進行顏色轉換時，可使用顏色 
			  * 呈現提示和抖動提示。 注意，務必要知足如下約束：源圖像與目標圖像 
			  * 必須不一樣。 對於 Raster 對象，源圖像中的 band 數必須等於目標圖像中 
			  * 的 band 數。 
             */  
             AffineTransformOp ato = new AffineTransformOp(transform,null);  
             BufferedImage bid = new BufferedImage(nw,nh,BufferedImage.TYPE_3BYTE_BGR);  
             /* 
              * TYPE_3BYTE_BGR 表示一個具備 8 位 RGB 顏色份量的圖像， 
              * 對應於 Windows 風格的 BGR 顏色模型，具備用 3 字節存 
              * 儲的 Blue、Green 和 Red 三種顏色。 
             */  
             ato.filter(bis,bid);  
             ImageIO.write(bid,"jpeg",dir);  
         } catch(Exception e) {  
             e.printStackTrace();  
         }  
    	
    	 return  dir + "/" + fileName;
    }
	
	
	 /** 
     * 複製整個文件夾內容 
     * @param oldPath 
     * @param newPath 
     * @return boolean 
     */ 
   public static void copyFolder(String oldPath, String newPath) {

       try { 
    	   //若是文件夾不存在 則創建新文件夾 
           (new File(newPath)).mkdirs(); 
           File a=new File(oldPath); 
           String[] file=a.list(); 
           File temp=null; 
           for (int i = 0; i < file.length; i++) { 
               if(oldPath.endsWith(File.separator)){ 
                   temp=new File(oldPath+file[i]); 
               } 
               else{ 
                   temp=new File(oldPath+File.separator+file[i]); 
               }

               if(temp.isFile()){ 
                   FileInputStream input = new FileInputStream(temp); 
                   FileOutputStream output = new FileOutputStream(newPath + "/" + 
                           (temp.getName()).toString()); 
                   byte[] b = new byte[1024 * 5]; 
                   int len; 
                   while ( (len = input.read(b)) != -1) { 
                       output.write(b, 0, len); 
                   } 
                   output.flush(); 
                   output.close(); 
                   input.close(); 
               } 
               if(temp.isDirectory()){//若是是子文件夾 
                   copyFolder(oldPath+"/"+file[i],newPath+"/"+file[i]); 
               } 
           } 
       } 
       catch (Exception e) { 
           System.out.println("複製整個文件夾內容操做出錯"); 
           e.printStackTrace();

       }

   }
   
   /** 
    * 刪除文件夾 
    * @param filePathAndName
    * @param fileContent
    * @return boolean 
    */ 
  public static void delFolder(String folderPath) { 
      try { 
          delAllFile(folderPath); //刪除完裏面全部內容 
          String filePath = folderPath; 
          filePath = filePath.toString(); 
          java.io.File myFilePath = new java.io.File(filePath); 
          myFilePath.delete(); //刪除空文件夾

      } 
      catch (Exception e) { 
          System.out.println("刪除文件夾操做出錯"); 
          e.printStackTrace();

      }

  }

  /** 
    * 刪除文件夾裏面的全部文件 
    * @param path
    */ 
  public static void delAllFile(String path) { 
      File file = new File(path); 
      if (!file.exists()) { 
          return; 
      } 
      if (!file.isDirectory()) { 
          return; 
      } 
      String[] tempList = file.list(); 
      File temp = null; 
      for (int i = 0; i < tempList.length; i++) { 
          if (path.endsWith(File.separator)) { 
              temp = new File(path + tempList[i]); 
          } 
          else { 
              temp = new File(path + File.separator + tempList[i]); 
          } 
          if (temp.isFile()) { 
              temp.delete(); 
          } 
          if (temp.isDirectory()) { 
              delAllFile(path+"/"+ tempList[i]);//先刪除文件夾裏面的文件 
              delFolder(path+"/"+ tempList[i]);//再刪除空文件夾 
          } 
      } 
    }
  
	  /** 
	   * 移動文件到指定目錄 
	   * @param oldPath
	   * @param newPath 
	   */ 
	public static void moveFile(String oldPath, String newPath) { 
		copyFolder(oldPath, newPath); 
		delFolder(oldPath);
	
	}
	
	public static void main(String[] args) {

		//		System.out.println(new Date().getTime());
//		System.out.println(String.valueOf(new Date().getTime()));
////		File f =new File("TileTest.doc");
//	      String fileName="TileTest....6.6doc";
//	      String prefix=fileName.substring(fileName.lastIndexOf("."));
//	      System.out.println(prefix);
//	      System.out.println(new Random().nextInt(1000000));
//	      System.out.println(new Random().nextInt(1000000));
//	      File f = new File("d:/1.txt");
//	      System.out.println(f.exists());
		
		File src = new File("D:\\dcd01448724c402a8cf8b852e1307510\\qrcode_for_gh_cf64bce34a18_344.jpg");
		File dir = new File("D:\\dcd01448724c402a8cf8b852e1307510");
//		File src = new File("D:\\vungu\\architecture\\vungu\\workspace0428\\vp-standweb\\src\\main\\webapp\\fileUpload\\images\\subscribe\\dcd01448724c402a8cf8b852e1307510\\20160120171448178836077.png");
//		File dir = new File("D:\\vungu\\architecture\\vungu\\workspace0428\\vp-standweb\\src\\main\\webapp\\fileUpload\\images\\subscribe\\dcd01448724c402a8cf8b852e1307510");
		String fileName = "20160120171448178836077thumb.jpg";
		int nw=360;
		int nh=200;
		thumb(src, dir, fileName, nw, nh);
	}
}

2、前端頁面

<blockquote class="layui-elem-quote explain">
	<p>layui 2.x 上傳文件示例</p>
</blockquote>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>常規使用：普通圖片上傳</legend>
</fieldset>
<div class="layui-upload">
  <button type="button" class="layui-btn" id="test1">上傳圖片</button>
  <div class="layui-upload-list">
	<img class="layui-upload-img" id="demo1" width="100px" height="100px;"/>
	<p id="demoText"></p>
  </div>
</div> 
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>上傳多張圖片</legend>
</fieldset>
<div class="layui-upload">
  <button type="button" class="layui-btn" id="test2">多圖片上傳</button> 
  <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
	預覽圖：
	<div class="layui-upload-list" id="demo2"></div>
 </blockquote>
</div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>指定容許上傳的文件類型</legend>
</fieldset>
<button type="button" class="layui-btn" id="test3"><i class="layui-icon"></i>上傳文件</button>
<button type="button" class="layui-btn layui-btn-primary" id="test4"><i class="layui-icon"></i>只容許壓縮文件</button>
<button type="button" class="layui-btn" id="test5"><i class="layui-icon"></i>上傳視頻</button>
<button type="button" class="layui-btn" id="test6"><i class="layui-icon"></i>上傳音頻</button> 

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>設定文件大小限制</legend>
</fieldset> 
<button type="button" class="layui-btn layui-btn-danger" id="test7"><i class="layui-icon"></i>上傳圖片</button>
<div class="layui-inline layui-word-aux">
  這裏以限制 60KB 爲例
</div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>同時綁定多個元素，並將屬性設定在元素上</legend>
</fieldset> 
<button class="layui-btn demoMore" lay-data="{url: '/a/'}">上傳A</button>
<button class="layui-btn demoMore" lay-data="{url: '/b/', size:5}">上傳B</button>
<button class="layui-btn demoMore" lay-data="{url: '/c/', accept: 'file',size:10}">上傳C</button>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>選完文件後不自動上傳</legend>
</fieldset>
<div class="layui-upload">
  <button type="button" class="layui-btn layui-btn-normal" id="test8">選擇文件</button>
  <button type="button" class="layui-btn" id="test9">開始上傳</button>
</div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>拖拽上傳</legend>
</fieldset> 
<div class="layui-upload-drag" id="test10">
  <i class="layui-icon"></i>
  <p>點擊上傳，或將文件拖拽到此處</p>
</div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>高級應用：製做一個多文件列表</legend>
</fieldset> 
<div class="layui-upload">
  <button type="button" class="layui-btn layui-btn-normal" id="testList">選擇多文件</button> 
  <div class="layui-upload-list">
	<table class="layui-table">
	  <thead>
		<tr><th>文件名</th>
		<th>大小</th>
		<th>狀態</th>
		<th>操做</th>
	  </tr></thead>
	  <tbody id="demoList"></tbody>
	</table>
  </div>
  <button type="button" class="layui-btn" id="testListAction">開始上傳</button>
</div> 
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>常規時間線</legend>
</fieldset>
<ul class="layui-timeline">
  <li class="layui-timeline-item">
	<i class="layui-icon layui-timeline-axis"></i>
	<div class="layui-timeline-content layui-text">
	  <h3 class="layui-timeline-title">8月18日</h3>
	  <p>
		layui 2.0 的一切準備工做彷佛都已到位。發佈之弦，一觸即發。
		<br>不枉近百個日日夜夜與之爲伴。因小而大，因弱而強。
		<br>不管它能走多遠，抑或如何支撐？至少我曾傾注全心，無怨無悔 <i class="layui-icon"></i>
	  </p>
	</div>
  </li>
  <li class="layui-timeline-item">
	<i class="layui-icon layui-timeline-axis"></i>
	<div class="layui-timeline-content layui-text">
	  <h3 class="layui-timeline-title">8月16日</h3>
	  <p>杜甫的思想核心是儒家的仁政思想，他有<em>「致君堯舜上，再使風俗淳」</em>的宏偉抱負。我的最愛的名篇有：</p>
	  <ul>
		<li>《登高》</li>
		<li>《茅屋爲秋風所破歌》</li>
	  </ul>
	</div>
  </li>
  <li class="layui-timeline-item">
	<i class="layui-icon layui-timeline-axis"></i>
	<div class="layui-timeline-content layui-text">
	  <h3 class="layui-timeline-title">8月15日</h3>
	  <p>
		中國人民抗日戰爭勝利日
		<br>經常在想，儘管對這個國家有這樣那樣的抱怨，但咱們的確生在了最好的時代
		<br>銘記、感恩
		<br>全部爲中華民族浴血奮戰的英雄將士
		<br>永垂不朽
	  </p>
	</div>
  </li>
  <li class="layui-timeline-item">
	<i class="layui-icon layui-timeline-axis"></i>
	<div class="layui-timeline-content layui-text">
	  <div class="layui-timeline-title">過去</div>
	</div>
  </li>
</ul>  
<script type="text/javascript">
	// 普通上傳
	layui.use('upload', function(){
	  var $ = layui.jquery
	  ,upload = layui.upload;
	  //普通圖片上傳
	  var uploadInst = upload.render({
		elem: '#test1'
		,url: '${basePath}/test/updatefiles.htm'
		,before: function(obj){
		  //預讀本地文件示例，不支持ie8
		  obj.preview(function(index, file, result){
			$('#demo1').attr('src', result); //圖片連接（base64）
		  });
		}
		,done: function(res){
		  //若是上傳失敗
		  if(res.code > 0){
			return layer.msg('上傳失敗');
		  }else{
			return layer.msg('上傳成功');
		  }
		}
		,error: function(){
		  //演示失敗狀態，並實現重傳
		  var demoText = $('#demoText');
		  demoText.html('<span style="color: #FF5722;">上傳失敗</span> <a class="layui-btn layui-btn-mini demo-reload">重試</a>');
		  demoText.find('.demo-reload').on('click', function(){
			uploadInst.upload();
		  });
		}
	  });
	});
	
	//多圖片上傳
	layui.use('upload', function(){
	  var $ = layui.jquery
	  ,upload = layui.upload;
	   upload.render({
		elem: '#test2'
		,url: '${basePath}/test/updatefiles.htm'
		,multiple: true
		,before: function(obj){
		  //預讀本地文件示例，不支持ie8
		  obj.preview(function(index, file, result){
			$('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" width="100px" height="100px;" class="layui-upload-img"> ')
		  });
		}
		,done: function(res){
		  //上傳完畢
		}
	  });
	});
	
	 //指定容許上傳的文件類型
	 layui.use('upload', function(){
	  var $ = layui.jquery
	  ,upload = layui.upload;
		  upload.render({
			elem: '#test3'
			,url: '${basePath}/test/updatefiles.htm'
			,accept: 'file' //普通文件
			,done: function(res){
			  console.log(res)
			}
		  });
		  upload.render({ //容許上傳的文件後綴
			elem: '#test4'
			,url: '${basePath}/test/updatefiles.htm'
			,accept: 'file' //普通文件
			,exts: 'zip|rar|7z' //只容許上傳壓縮文件
			,done: function(res){
			  console.log(res)
			}
		  });
		  upload.render({
			elem: '#test5'
			,url: '${basePath}/test/updatefiles.htm'
			,accept: 'video' //視頻
			,done: function(res){
			  console.log(res)
			}
		  });
		  upload.render({
			elem: '#test6'
			,url: '${basePath}/test/updatefiles.htm'
			,accept: 'audio' //音頻
			,done: function(res){
			  console.log(res)
			}
		  });
	 });
	
	//設定文件大小限制
	layui.use('upload', function(){
	 var $ = layui.jquery
	  ,upload = layui.upload;
	  upload.render({
		elem: '#test7'
		,url: '${basePath}/test/updatefiles.htm'
		,size: 60 //限制文件大小，單位 KB
		,done: function(res){
		  console.log(res)
		}
	  });
	});
	
	//同時綁定多個元素，並將屬性設定在元素上
	layui.use('upload', function(){
	 var $ = layui.jquery
	  ,upload = layui.upload;
	 upload.render({
			elem: '.demoMore'
			,before: function(){
			  layer.tips('接口地址：'+ this.url, this.item, {tips: 1});
			}
			,done: function(res, index, upload){
			  var item = this.item;
			  console.log(item); //獲取當前觸發上傳的元素，layui 2.1.0 新增
			}
		  })
	});
	//選完文件後不自動上傳
	layui.use('upload', function(){
		 var $ = layui.jquery
		  ,upload = layui.upload;
		  upload.render({
			elem: '#test8'
			,url: '${basePath}/test/updatefiles.htm'
			,auto: false
			//,multiple: true
			,bindAction: '#test9'
			,done: function(res){
				 if(res.code > 0){
					return layer.msg('上傳失敗');
				  }else{
					return layer.msg('上傳成功');
				  }
			}
		  });
	});
	layui.use('upload', function(){
		 var $ = layui.jquery
		  ,upload = layui.upload;
		 upload.render({
			elem: '#test10'
			,url: '${basePath}/test/updatefiles.htm'
			,done: function(res){
				 if(res.code > 0){
					return layer.msg('上傳失敗');
				  }else{
					return layer.msg('上傳成功');
				  }
			}
		  });
	 });
	layui.use(['form','upload','layer','jquery'], function(){
		var form = layui.form,
			upload = layui.upload,
			layer = parent.layer === undefined ? layui.layer : parent.layer,
			$ = layui.jquery;
	  //多文件列表示例
	  var demoListView = $('#demoList')
	  ,uploadListIns = upload.render({
		elem: '#testList'
		,url: '${basePath}/test/updatefiles.htm'
		,accept: 'file'
		,multiple: true
		,auto: false
		,bindAction: '#testListAction'
		,choose: function(obj){   
		  var files = this.files = obj.pushFile(); //將每次選擇的文件追加到文件隊列
		  //讀取本地文件
		  obj.preview(function(index, file, result){
			var tr = $(['<tr id="upload-'+ index +'">'
			  ,'<td>'+ file.name +'</td>'
			  ,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
			  ,'<td>等待上傳</td>'
			  ,'<td>'
				,'<button class="layui-btn layui-btn-mini demo-reload layui-hide">重傳</button>'
				,'<button class="layui-btn layui-btn-mini layui-btn-danger demo-delete">刪除</button>'
			  ,'</td>'
			,'</tr>'].join(''));
			
			//單個重傳
			tr.find('.demo-reload').on('click', function(){
			  obj.upload(index, file);
			});
			
			//刪除
			tr.find('.demo-delete').on('click', function(){
			  delete files[index]; //刪除對應的文件
			  tr.remove();
			  uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以避免刪除後出現同名文件不可選
			});
			
			demoListView.append(tr);
		  });
		}
		
		,done: function(res, index, upload){
		  if(res.code == 0){ //上傳成功
			var tr = demoListView.find('tr#upload-'+ index)
			,tds = tr.children();
			tds.eq(2).html('<span style="color: #5FB878;">上傳成功</span>');
			tds.eq(3).html(''); //清空操做
			return delete this.files[index]; //刪除文件隊列已經上傳成功的文件
		  }
		  this.error(index, upload);
		}
		
		,error: function(index, upload){
		  var tr = demoListView.find('tr#upload-'+ index)
		  ,tds = tr.children();
		  tds.eq(2).html('<span style="color: #FF5722;">上傳失敗</span>');
		  tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //顯示重傳
		}
	  });
	});
</script>

3、控制器

@RequestMapping("updatefiles")
public JSONObject updateFiles(HttpServletRequest request,MultipartFile file,FileBean fb) {
	String uploadDir = "/upload";
	Map<String,String> fileMap = new HashMap<String,String>();
	fileMap.put("src", FileUtils.upload(file, request, uploadDir));
	if(StringUtils.isNotBlank(fileMap.get("src"))){
		fb.setCode(0);
		fb.setData(fileMap);
		fb.setMsg("上傳成功");
	}else{
		fb.setCode(1);
		fb.setData(fileMap);
		fb.setMsg("上傳失敗");
	}
	JSONObject json = JSONObject.fromObject(fb);
	return json;
}