码迷,mamicode.com
首页 > Web开发 > 详细

Layui 多文件上传 SSH

时间:2019-09-08 20:06:51      阅读:286      评论:0      收藏:0      [点我收藏+]

标签:tab   pack   title   传参   import   The   click   ref   文件上传   

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>

Layui 多文件上传 SSH

标签:tab   pack   title   传参   import   The   click   ref   文件上传   

原文地址:https://www.cnblogs.com/riyueqian/p/11487943.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!