layui 批量上传文件 + 后台用servlet3.0接收【我】

前台代码：

【主要参照layui官方文件上传示例 https://www.layui.com/demo/upload.html】

<!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="//res.layui.com/layui/dist/css/layui.css"  media="all">

  <!-- 注意：如果你直接复制所有代码到本地，上述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> 

<script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>

<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

<script>

    layui.use('upload', function(){

          var $ = layui.jquery

          ,upload = layui.upload;

          //多文件列表示例

          var demoListView = $('#demoList')

          ,uploadListIns = upload.render({

            elem: '#testList'

            ,url: 'http://127.0.0.1/crmCust-web/BatchSupplementIdentityServlet.do?servletType=batchInFiles'

            ,data: {myId:3435} //除了文件外的额外参数

            ,accept: 'file'

            ,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-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){

              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'); //显示重传

            }

            ,allDone: function(obj){ //当文件全部被提交后，才触发

    //            console.log(obj.total); //得到总文件数

    //            console.log(obj.successful); //请求成功的文件数

    //            console.log(obj.aborted); //请求失败的文件数

                alert("得到总文件数："+obj.total+"\r\n成功上传的文件数："+obj.successful+"\r\n失败文件数："+obj.aborted);

                $("#demoList").empty();

             }

        });

    });

</script>

</body>

</html>

后台代码：

package com.crm.servlet;

import java.io.File;

import java.io.IOException;

import java.io.PrintWriter;

import java.util.Collection;

import java.util.HashMap;

import java.util.Map;

import javax.servlet.ServletException;

import javax.servlet.annotation.MultipartConfig;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import javax.servlet.http.HttpSession;

import javax.servlet.http.Part;

import org.springframework.context.ApplicationContext;

import org.springframework.web.context.support.WebApplicationContextUtils;

import net.sf.json.JSONObject;

/**

 *

* @Package com.crm.servlet

* @

* @author

* @date 2018年4月2日 上午8:06:15

* @Description: 批量上传

* @version V1.0

 */

@WebServlet("/BatchSupplementIdentityServlet.do")

@MultipartConfig

public class BatchSupplementIdentityServlet extends AbstractBaseServlet {

    private static final long serialVersionUID = 1L;

    private SelectBoxContainer selectBox = new SelectBoxContainer();

    public BatchSupplementIdentityServlet() {

        super();

    }

    @SuppressWarnings({ "rawtypes", "unchecked" })

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        ApplicationContext context = WebApplicationContextUtils.getWebApplicationContext(request.getServletContext());

        WebContextUtils.setWebApplicationContext(context);

        response.setCharacterEncoding("UTF-8");

        Map requestMap = BaseServletHelper.parseRequst2Map(request);

        HttpSession session = request.getSession();

        Map<String,Object> userMap = RedisSessionUtil.getInstance(request).get(session.getId());

        // 接收文件

        if ("batchInFiles".equals(requestMap.get("servletType")) ) {

            //获取额外参数

            String myId = request.getParameter("myId");

            System.out.println(myId);

            File path = new File("d:\\tmp");

            if (!path.exists()){

                path.mkdir();

            }

           /* //根据名称获取文件

            Part img = request.getPart("file");

            //文件全路径

            String filePath = path.getPath() + File.separator + img.getSubmittedFileName();

            //写入文件

            img.write(filePath);

            //输出信息

            System.out.println("File Upload : " + filePath);*/

          //获取文件（不知道文件名称，获取所有文件）

            Collection<Part> parts = request.getParts();

            String fileName = null;

            //遍历取出文件

            for (Part part : parts) {

                System.out.println("-----------------------");

                if(part.getHeader("Content-Disposition").contains("filename")){

                    fileName = part.getHeader("Content-Disposition");

                    fileName = fileName.substring(fileName.indexOf("filename=\"")+10, fileName.lastIndexOf("\""));

                    System.out.println("fileName: "+fileName);

                    //存储文件  利用part的api将临时文件写入目标文件

                    part.write("d:/tmp/"+fileName);

                }

                System.out.println("-----------------------");

            }

            //定义返回map

            Map<String,Object> reMap = new HashMap<>();

            reMap.put("code", 0);

            reMap.put("filePath", "d:/tmp/"+fileName);

            //转换为json返回前台

            String result = JSONObject.fromObject(reMap).toString();

            PrintWriter out = response.getWriter();

            out.println(result);

            out.flush();

            out.close();

        }

    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        doGet(request, response);

    }

}

【layui的文件批量上传，基本都是一个文件请求一次后台，这个也是一样的，如果你选了3个文件，那么就会向后台请求3次】

layui 批量上传文件 + 后台用servlet3.0接收【我】的更多相关文章

转 Android网络编程之使用HttpClient批量上传文件 MultipartEntityBuilder
请尊重他人的劳动成果,转载请注明出处:Android网络编程之使用HttpClient批量上传文件 http://www.tuicool.com/articles/Y7reYb 我曾在<Andr ...
不带插件，自己写js，实现批量上传文件及进度显示
今天接受项目中要完成文件批量上传文件而且还要显示上传进度,一开始觉得这个应该不是很麻烦,当我在做的时候遇到了很多问题,很头疼啊. 不过看了别人写的代码,自己也测试过,发现网上好多都存在一些问题,并不是 ...
TP3.2批量上传文件（图片），解决同名冲突问题
1.html <form action="{:U('Upload/index')}" enctype="multipart/form-data" meth ...
Linux命令之rz - 批量上传文件，简单易用（转载）
用途说明 rz命令能够批量上传文件,当然也可上传单个文件啦.使用的协议是古老的ZMODEM协议,尽管协议古老,但毫不影响的简单易用的特性.一般情况我们要上传文件到Linux系统,要么使用ftp(还得 ...
Python基于Python实现批量上传文件或目录到不同的Linux服务器
基于Python实现批量上传文件或目录到不同的Linux服务器 by:授客 QQ:1033553122 实现功能 1 测试环境 1 使用方法 1 1. 编辑配置文件conf/rootpath_fo ...
input file multiple 批量上传文件
这几天维护系统,有一个批量上传文件功能,出现了一点小问题我的笔记本选择要上传的文件很正常但在测试环境上,别人的电脑上,选择上传文件之后一开始,以为是代码问题,网上找了很多的资料,但还是没用,然后 ...
使用 sendKeys(keysToSend) 批量上传文件
未经允许,禁止转载!!! 在selenium里面处理文件上传的时候可以使用sendKeys(keysToSend) 上传文件例如: element.sendKeys(“C:\\test\\uploa ...
用Azure CLI批量上传文件
在Windows环境下,我们可以使用AzCopy批量上传文件.其效率和传输速率都是非常快的. 在Linux或MacOS环境下,可以使用Azure的CLI实现批量文件的上传. 下面的脚本可以实现此功能. ...
Java Miniui实现批量上传文件demo 201906221520
可能需要的jar包: 需要miniui(类似easyui). Test2019062201.jsp <%@ page language="java" contentType= ...

随机推荐

MySQL高可用方案－PXC环境部署记录
之前梳理了Mysql+Keepalived双主热备高可用操作记录,对于mysql高可用方案,经常用到的的主要有下面三种: 一.基于主从复制的高可用方案:双节点主从 + keepalived 一般来说, ...
Redis数据"丢失"讨论及规避和解决的几点总结
Redis大部分应用场景是纯缓存服务,请求后端有Primary Storage的组件,如MySQL,HBase;请求Redis的键未命中,会从primary Storage中获取数据返回,同时更新Re ...
mybaits拦截器+自定义注解
实现目的:为了存储了公共字典表主键的其他表在查询的时候不用关联查询(所以拦截位置位于mybaits语句查询得出结果集后) 项目环境 :springboot+mybaits 实现步骤:自定义注解——自定 ...
my项目的总结2015.8.26编
这已经是上上个星期的事了,现在回顾一下: 负责的模块是"my",更精准的说应该是my里面的个人信息管理由于项目分域,模块已经分好了,涉及到的只是在现有的基础上解决分域后遗留的历史 ...
安装MySQL和其他包
安装 MySQL 1. 下载 MySQL 安装包记得要下载 msi 可执行文件,而不是源码包. https://dev.mysql.com/downloads/file/?id=474803 这个安 ...
Beta阶段敏捷冲刺五
一.举行站立式会议 1.当天站立式会议照片一张 2.团队成员报告林楚虹 (1) 昨天已完成的工作:排行榜功能.完善从数据库读取单词放入缓存功能(即完善select.js) (2) 今天计划完成的工作 ...
PAT 1076 Wifi密码
https://pintia.cn/problem-sets/994805260223102976/problems/994805262622244864 下面是微博上流传的一张照片:“各位亲爱的同学 ...
Hot code replace (HCR)
https://wiki.eclipse.org/FAQ_What_is_hot_code_replace%3F https://zhidao.baidu.com/question/195505558 ...
使用非服务器磁盘(MBROnly)安装ESXi时的方法.
From ESXi 5.0, if you install ESXi to a empty hard disk, the target disk will be prepared with GPT-b ...
python模块_re模块
正则表达式笔记'''#re.match 尝试从字符串的起始位置匹配一个模式,如果不是起始位置匹配成功的话,match()就返回none.#re.search 扫描整个字符串并返回第一个成功的匹配#fi ...

layui 批量上传文件 + 后台 用servlet3.0接收【我】

layui 批量上传文件 + 后台 用servlet3.0接收【我】的更多相关文章

随机推荐

热门专题

layui 批量上传文件 + 后台用servlet3.0接收【我】

layui 批量上传文件 + 后台用servlet3.0接收【我】的更多相关文章