Layer文件上传同时传递表单数据

时间:2022-07-26 14:38:32

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