正文
Layer文件上传同时传递表单数据
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
（1）index.html
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<link rel="stylesheet" href="./layui/css/layui.css" media="all">
</head>
<body>
<div class="layui-container">
<form class="layui-form" action="" enctype="multipart/form-data">
<div class="layui-form-item">
<label class="layui-form-label">标题</label>
<div class="layui-input-block">
<input id="title" type="text" name="title" maxlength="300" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
</div>
</div> <div class="layui-form-item">
<label class="layui-form-label">上传文件</label>
<div class="layui-input-inline uploadHeadImage">
<div class="layui-upload-drag" id="uploadFile">
<i class="layui-icon"></i>
<p>点击上传文件，或将文件拖拽到此处！</p>
</div>
</div>
<div class="layui-input-inline">
<div id="uploadResult" class="layui-upload-list"> </div>
</div>
</div> <div class="layui-form-item layui-form-text">
<label class="layui-form-label">备注</label>
<div class="layui-input-block">
<textarea name="desc" placeholder="请输入内容" maxlength="1000" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" id="uploadBtn">提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
</body> <script src="./jquery/jquery.min.js"></script>
<script src="./layui/layui.js"></script> <script>
layui.use('upload', function() {
var upload = layui.upload; //执行上传
var uploadInst = upload.render({
elem: '#uploadFile', //绑定元素
url: '../FileUploadServer', //上传接口
method: 'POST',
auto: false,
accept: 'file',
bindAction: '#uploadBtn',
size: 10240,//限制文件大小10M
multiple: false,
data:{}, before: function(obj) {
layer.load(); this.data.title = $('#title').val();
}, done: function(data, index, upload) {//上传完毕回调
layer.closeAll('loading'); if (data.no === 1) {
layer.msg("上传成功！", {
icon: 6
});
} else {
layer.msg("上传失败，请稍后重试！", {
icon: 5
});
} var uuid = data.uuid; $("#uploadResult").append('<input readonly type="text" value="'+uuid+'" class="layui-input" />');
}
, error: function() {//请求异常回调
layer.closeAll('loading');
layer.msg('网络异常，请稍后重试！');
}
});
});
</script>
</html>
（2）后台服务
package com.microwisdom.file; import com.google.gson.Gson;
import java.io.*;
import java.util.*;
import java.util.logging.Level;
import java.util.logging.Logger;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload; /**
* @作者 yan
* @创建日期
* @版本 V1.0
* @描述
* @Path
*/
public class FileUploadServer extends HttpServlet { protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/json;charset=UTF-8");
request.setCharacterEncoding("UTF-8"); PrintWriter pw = response.getWriter(); Map<String,Object> resultMap = new HashMap<String,Object>(); String result = ""; //上传文件的保存目录
String savePath = "D:\\tmp\\file_server\\app\\";
//上传时生成的临时文件保存目录
String tempPath = "D:\\tmp\\file_server\\tmp"; File tmpFile = new File(tempPath);
if (!tmpFile.exists()) {
//创建临时目录
tmpFile.mkdir();
} //使用Apache文件上传组件处理文件上传步骤：
//1、创建一个DiskFileItemFactory工厂
DiskFileItemFactory factory = new DiskFileItemFactory();
//设置工厂的缓冲区的大小，当上传的文件大小超过缓冲区的大小时，就会生成一个临时文件存放到指定的临时目录当中。
factory.setSizeThreshold(1024 * 1024 * 10);//设置缓冲区的大小为10M，如果不指定，那么缓冲区的大小默认是10KB
//设置上传时生成的临时文件的保存目录
factory.setRepository(tmpFile); //2、创建一个文件上传解析器
ServletFileUpload upload = new ServletFileUpload(factory); //解决上传文件名的中文乱码
upload.setHeaderEncoding("UTF-8");
//3、判断提交上来的数据是否是上传表单的数据
if (!ServletFileUpload.isMultipartContent(request)) {
//按照传统方式获取数据
return;
} //设置上传单个文件的大小的最大值，目前是设置为1024*1024*10字节，也就是10MB
upload.setFileSizeMax(1024 * 1024 * 10);
//设置上传文件总量的最大值，最大值=同时上传的多个文件的大小的最大值的和，目前设置为10MB
upload.setSizeMax(1024 * 1024 * 10); //4、使用ServletFileUpload解析器解析上传数据，解析结果返回的是一个List<FileItem>集合，每一个FileItem对应一个Form表单的输入项
List<FileItem> list = null;
try {
list = upload.parseRequest(request);
for (FileItem item : list) {
//如果fileitem中封装的是普通输入项的数据
if (item.isFormField()) {
String name = item.getFieldName();
//解决普通输入项的数据的中文乱码问题
String value = item.getString("UTF-8");
//value = new String(value.getBytes("iso8859-1"),"UTF-8");
System.out.println(name + "=" + value);
} else {//如果fileitem中封装的是上传文件
//得到上传的文件名称，
String filename = item.getName();
System.out.println(filename);
if (filename == null || filename.trim().equals("")) {
continue;
} //注意：不同的浏览器提交的文件名是不一样的，有些浏览器提交上来的文件名是带有路径的，如： c:\a\b\1.txt，而有些只是单纯的文件名，如：1.txt
//处理获取到的上传文件的文件名的路径部分，只保留文件名部分
filename = filename.substring(filename.lastIndexOf("\\") + 1);
//得到上传文件的扩展名
String fileExtName = filename.substring(filename.lastIndexOf(".") + 1);
//如果需要限制上传的文件类型，那么可以通过文件的扩展名来判断上传的文件类型是否合法
System.out.println("上传的文件的扩展名是：" + fileExtName);
//获取item中的上传文件的输入流
InputStream in = item.getInputStream(); //得到文件保存的名称
String saveFilename = makeFileName(filename);
//得到文件的保存目录
String realSavePath = makePath(saveFilename, savePath);
//创建一个文件输出流
FileOutputStream out = new FileOutputStream(realSavePath + "\\" + saveFilename);
//创建一个缓冲区
byte buffer[] = new byte[1024];
//判断输入流中的数据是否已经读完的标识
int len = 0;
//循环将输入流读入到缓冲区当中，(len=in.read(buffer))>0就表示in里面还有数据
while ((len = in.read(buffer)) > 0) {
//使用FileOutputStream输出流将缓冲区的数据写入到指定的目录(savePath + "\\" + filename)当中
out.write(buffer, 0, len);
}
//关闭输入流
in.close();
//关闭输出流
out.close();
//删除处理文件上传时生成的临时文件
item.delete(); resultMap.put("no", 1);
resultMap.put("msg", "文件上传成功！");
resultMap.put("uuid", UUID.randomUUID().toString().replaceAll("-", "")); result = new Gson().toJson(resultMap);
}
}
} catch (FileUploadException ex) {
Logger.getLogger(FileUploadServer.class.getName()).log(Level.SEVERE, null, ex);
} finally{
pw.print(result);
} } @Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
} @Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
} private String makeFileName(String filename){
//为防止文件覆盖的现象发生，要为上传文件产生一个唯一的文件名
return UUID.randomUUID().toString() + "_" + filename;
} private String makePath(String filename,String savePath){
//得到文件名的hashCode的值，得到的就是filename这个字符串对象在内存中的地址
int hashcode = filename.hashCode();
int dir1 = hashcode&0xf; //0--15
int dir2 = (hashcode&0xf0)>>4; //0-15
//构造新的保存目录
String dir = savePath + "\\" + dir1 + "\\" + dir2; //upload\2\3 upload\3\5
//File既可以代表文件也可以代表目录
File file = new File(dir);
//如果目录不存在
if(!file.exists()){
//创建目录
file.mkdirs();
}
return dir;
} }
