Layui_2.x_上传插件使用

一、上传类

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);
	}
}

二、前端页面

<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>

三、控制器

@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;
}