• Layui 多文件上传 SSH


    jsp 页面

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <%@ include file="/WEB-INF/common/common.jsp"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <link rel="stylesheet" href="css/layui.css">
    </head>
    <body>
    <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>
    </body>
    <script type="text/javascript" src="js/layui.js"></script>
    <script type="text/javascript" src="js/layui.all.js"></script>
    <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="js/jquery-1.12.3.js"></script>
    <script type="text/javascript">
    layui.use('upload', function(){
          var $ = layui.jquery
          ,upload = layui.upload;
          
    //多文件列表示例
    var demoListView = $('#demoList')
    ,uploadListIns = upload.render({
      elem: '#testList'
      ,url: '<%=path%>/Lol_uploadFile.action'
      ,accept: 'file'
      ,data:{id:123}   //还可以传参,参数id=123
      ,multiple: true
      ,auto: false
      ,bindAction: '#testListAction'
      ,success:function(msg) {
          $.each($.parseJSON(msg.jsonData),function(i,item){
          if (item.fileName==1) {
              alert("ok");
            } else {
              alert("ok");
           }
         });
        }
      ,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-xs demo-reload layui-hide">重传</button>'
              ,'<button class="layui-btn layui-btn-xs 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){
          $.each($.parseJSON(res.jsonData),function(i,item){
              if(item.success==1) {//上传成功
                  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>
    </html>

    action方法

    需要添加两个属性

    List<File> file;

    List<String> fileFileName;

    //记住要添加对应的get、set

        public String updateImg() throws Exception {
            JSONArray array = new JSONArray();
            JSONObject obj = new JSONObject();
            if(UploadFile.uploadFileBase(0, file, fileFileName, UPLOADDIR)) {
                BusinessImage bsnImg = new BusinessImage();
                bsnImg.setId(Integer.parseInt(imgId));
                bsnImg.setImgUrl(UPLOADDIR+"/"+fileFileName.get(0));
                businessImageServiceImpI.updateBusinessImageAjax(bsnImg);
                obj.put("success", "1");
            } else {
                obj.put("success", "0");
            }
            array.put(obj);
            jsonData = array.toString();
            System.out.println(jsonData);
            return SUCCESS;
        }

    图片上传工具类

    package com.gxuwz.core.util;

    import java.io.File;
    import java.io.FileInputStream;
    import java.io.FileNotFoundException;
    import java.io.FileOutputStream;
    import java.io.IOException;
    import java.io.InputStream;
    import java.io.OutputStream;
    import java.util.List;

    import org.apache.struts2.ServletActionContext;

    public class UploadFile {

        @SuppressWarnings("deprecation")
        public static boolean uploadFileBase(int i,List<File> file,List<String> fileFileName,String uploadPath) throws Exception {
            try {
                InputStream in = new FileInputStream(file.get(i));
                String dir = ServletActionContext.getRequest().getRealPath(uploadPath);
                File fileLocation = new File(dir);
                //此处也可以在应用根目录手动建立目标上传目录
                if(!fileLocation.exists()){
                    boolean isCreated  = fileLocation.mkdir();
                    if(!isCreated) {
                        //目标上传目录创建失败,可做其他处理,例如抛出自定义异常等,一般应该不会出现这种情况。
                        return false;
                    }
                }
                String fileName=fileFileName.get(i);
                File uploadFile = new File(dir, fileName);
                OutputStream out = new FileOutputStream(uploadFile);
                byte[] buffer = new byte[1024 * 1024];
                int length;
                while ((length = in.read(buffer)) > 0) {
                    out.write(buffer, 0, length);
                }
                in.close();
                out.close();
                return true;
            } catch (FileNotFoundException ex) {
                ex.printStackTrace();
                return false;
            } catch (IOException ex) {
                ex.printStackTrace();
                return false;
            }
        }

    }

    如果不会配struct.xml 请往下看

        <package name="data-json" extends="json-default" namespace="/">
         <action name="*_*" class="com.gxuwz.Market.business.action.web.{1}Action" method="{2}">
          <result name="success" type="json">
           <param name="json">jsonData</param>
           </result>
           </action>
         </package>

  • 相关阅读:
    【转载】实时嵌入式软件开发的25个常见错误
    软件测试高级测评师培训-白盒测试所用工具
    SQL update select语句
    JS对URL字符串进行编码/解码分析
    Java利用jacob实现文档格式转换
    Web打印--Lodop API
    常用正则表达式
    截取视频第一帧作为预览图片
    plupload api
    URL特殊字符的转义
  • 原文地址:https://www.cnblogs.com/riyueqian/p/11487943.html
Copyright © 2020-2023  润新知