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