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