Layui多文件上传，java后台（servlet实现）

╰半夏微凉° 2022-05-20 03:10 852阅读 0赞

今天做了一个多文件上传的页面，运用的是layui前端框架，后面是找了好多都没找到java的代码，记得以前写过一次ajaxfileupload实现无刷新上传文件，拿过来试了一下，完美适配，下面直接贴代码。ajaxfileupload的代码有空会补一篇。

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
    <%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    %>
    
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>layui</title>
      <meta name="renderer" content="webkit">
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
      <link rel="stylesheet" href="<%=basePath%>layui/css/layui.css"  media="all">
      
    </head>
    <body>
              
    <blockquote class="layui-elem-quote">为节省服务器开销，以下示例均未配置真实上传接口，所以每次上传都会报提示：请求上传接口出现异常，这属于正常现象。</blockquote>   
    
    <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> 
      
     
     
              
    <script src="<%=basePath%>layui/layui.js" charset="utf-8"></script>
    
    <script>
    layui.use('upload', function(){
      var $ = layui.jquery
      ,upload = layui.upload;
      
      upload.render({ //允许上传的文件后缀
        elem: '#test4'
        ,url: '/upload/'
        ,accept: 'file' //普通文件
        ,exts: 'zip|rar|7z' //只允许上传压缩文件
        ,done: function(res){
          console.log(res)
        }
      });
      
      //设定文件大小限制
      upload.render({
        elem: '#test7'
        ,url: '/upload/'
        ,size: 60 //限制文件大小，单位 KB
        ,done: function(res){
          console.log(res)
        }
      });
      
      //多文件列表示例
      var demoListView = $('#demoList')
      ,uploadListIns = upload.render({
        elem: '#testList'
        ,url: '/LayUiUpload'
      //  ,size: 60 //限制文件大小，单位 KB
        ,accept: 'image/*'
        ,data:{'ID':277}   //可放扩展数据  key-value
        ,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>
    
    </body>
    </html>

官网的例子非常全，去掉其他的，只留下了多文件上传，要说一下就是data传参好像不行，或者是我不知道怎么接收，下面是上传页面

![70][]

下面是java后台代码

package service.atlas.control;
    
    import java.io.File;
    import java.io.IOException;
    import java.util.Date;
    import java.util.HashMap;
    import java.util.List;
    import java.util.Map;
    
    import javax.servlet.ServletConfig;
    import javax.servlet.ServletContext;
    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.disk.DiskFileItemFactory;
    import org.apache.commons.fileupload.servlet.ServletFileUpload;
    
    import com.gexin.fastjson.JSONObject;
    import common.App;
    
    
    public class LayUiUpload extends HttpServlet {
    
    	// 保存文件的目录
    	private static String PATH_FOLDER = "/";
    	// 存放临时文件的目录
    	private static String TEMP_FOLDER = "/";
    	
    		
    	/**
    	 * Constructor of the object.
    	 */
    	public LayUiUpload() {
    		super();
    	}
    
    	/**
    	 * Destruction of the servlet. <br>
    	 */
    	public void destroy() {
    		super.destroy(); // Just puts "destroy" string in log
    		// Put your code here
    	}
    
    	public void doGet(HttpServletRequest request, HttpServletResponse response)
    			throws ServletException, IOException {
    
    		this.doPost(request, response);
    	}
    
    	public synchronized void doPost(HttpServletRequest request, HttpServletResponse response)
    			throws ServletException, IOException {
    		// 结果json对象
    		JSONObject jsonobj = new JSONObject();
    		int returnTag = -1;
    		String saveName=null;
    		//上传的文件名
    		String filename=null;
    		String id = request.getParameter("ID");
    		System.out.println("id============="+id);
    		try {
    			System.out.println("==========以下为上传代码============");
    			request.setCharacterEncoding("utf-8"); // 设置编码
    			response.setCharacterEncoding("utf-8");
    			response.setContentType("text/html;charset=UTF-8");
    			// 获得磁盘文件条目工厂
    			DiskFileItemFactory factory = new DiskFileItemFactory();
    
    			// 如果没以下两行设置的话，上传大的 文件 会占用 很多内存，
    			// 设置暂时存放的 存储室 , 这个存储室，可以和 最终存储文件 的目录不同
    			/**
    			 * 原理 它是先存到 暂时存储室，然后在真正写到 对应目录的硬盘上， 按理来说 当上传一个文件时，其实是上传了两份，第一个是以
    			 * .tem 格式的 然后再将其真正写到 对应目录的硬盘上
    			 */
    			factory.setRepository(new File(TEMP_FOLDER));
    			// 设置 缓存的大小，当上传文件的容量超过该缓存时，直接放到 暂时存储室
    			factory.setSizeThreshold(1024 * 1024);
    			
    			// 高水平的API文件上传处理
    			ServletFileUpload upload = new ServletFileUpload(factory);
    
    			// 提交上来的信息都在这个list里面
    			// 这意味着可以上传多个文件
    			// 请自行组织代码
    			List<FileItem> list = upload.parseRequest(request);
    			
    			// 获取上传的文件
    			for (FileItem file : list) {
    				FileItem item = file;
    				// 获取文件名
    				 filename = getUploadFileName(item);
    				System.out.println("获取的文件名============================"
    						+ filename);
    				String suffix = filename
    						.substring(filename.lastIndexOf(".") + 1);
    				System.out
    						.println("获取的文件后缀名=========================" + suffix);
    				String[] regular = { "JPG", "GIF","PNG","JPEG" ,"BMP"};
    				boolean flag = false;
    				// 判断文件格式是否合法
    				for (String str : regular) {
    					if (suffix.equalsIgnoreCase(str)) {
    						flag = true;
    					}
    				}
    				if (!flag) {
    					returnTag = 0;
    					throw new Exception("文件格式不合法！");
    				}
    
    				// 保存后的文件名
    				 saveName = new Date().getTime()
    						+ filename.substring(filename.lastIndexOf("."));
    				// 保存后图片的浏览器访问路径
    				String picUrl = App.UPLOAD_SAVE_IMG_URL+saveName;
    
    				System.out.println("存放目录:=================================="
    						+ PATH_FOLDER);
    				System.out.println("文件名:===================================="
    						+ filename);
    				System.out.println("浏览器访问路径:============================="
    						+ picUrl);
    
    				// 真正写到磁盘上
    				item.write(new File(PATH_FOLDER, saveName)); // 第三方提供的
    				
    			}
    			System.out.println("==========以上为上传代码=============");
    			if (returnTag != -1) {
    				// 请求失败
    				jsonobj.put("STATUS", "1");
    			} else {
    				jsonobj.put("code", 0);
    			}
    			response.getWriter().write(jsonobj.toString());
    			response.getWriter().close();
    		} catch (Exception e) {
    			e.printStackTrace();
    			jsonobj.put("errorCode", 0);
    			response.getWriter().write(jsonobj.toString());
    			response.getWriter().close();
    
    		}
    	}
    	private String getUploadFileName(FileItem item) {
    		// 获取路径名
    		String value = item.getName();
    		// 索引到最后一个反斜杠
    		int start = value.lastIndexOf("/");
    		// 截取 上传文件的 字符串名字，加1是 去掉反斜杠，
    		String filename = value.substring(start + 1);
    
    		return filename;
    	}
    
    	/**
    	 * Initialization of the servlet. <br>
    	 *
    	 * @throws ServletException if an error occurs
    	 */
    	public void init(ServletConfig config) throws ServletException {
    		ServletContext servletCtx = config.getServletContext();
    		// 初始化路径
    		// 缩略图保存路径
    		PATH_FOLDER = "D:/source/aaa";
    		System.out.println("保存缩略图的目录===========" + PATH_FOLDER);
    		// 存放临时文件的目录,存放xxx.tmp文件的目录
    		TEMP_FOLDER = servletCtx.getRealPath("/temp");
    		System.out.println("存放临时文件的目录===========" + TEMP_FOLDER);
    		File dir = new File(PATH_FOLDER);
    		if (!dir.isDirectory()) {
    			dir.mkdir();
    		}
    		File dir2 = new File(TEMP_FOLDER);
    		if (!dir2.isDirectory()) {
    			dir2.mkdir();
    		}
    	}
    
    }

写了一个样例，试了一下功能，细节还没改。

[70]: /images/20220520/e93cc4f8f92e4bff9725fd9d74a2f23e.png