实现多个文件上传

最新推荐文章于 2022-06-07 21:48:10 发布
最新推荐文章于 2022-06-07 21:48:10 发布
阅读量482 收藏
点赞数
文章标签： FileUpload 多文件上传
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaobiaobiao521/article/details/8931739
版权

思想：

      在上传的页面加一个添加的按钮，分别上传

      把上传的数据保存到List中

      把list放到request中转发到显示页面显示

1.主页

 

<body>

  动态的上传多个文件<br/>

  <button onclick="_add();">增加</button>

  <form action="<c:url value='UpServlet'/>"method="post" enctype="multipart/form-data">

       <table id="tb"border="1" width="400">

          <tr>

             <td>

                 <input type="file"name="img"/><br/>

                               说明<input type="text"name="desc"/>                            

             </td>

             <td>

                 <button onclick="_del(this);">删除</button>                            

             </td>

          </tr>

       </table>

  </form>

  <button onclick="_up();">上传</button>

</body>

<script type="text/javascript">

   function_add(){

    var tb = document.getElementById("tb");

    var row = tb.insertRow();

    var td = row.insertCell();

    td.innerHTML='<input type="file"name="img"/><br/>说明<input type="text"name="desc"/>';

    td=row.insertCell();

    td.innerHTML='<button οnclick="_del();">删除</button>';

   }

   function_del(btn){

    var tb = document.getElementById("tb");

    //获取这个元素所在行的下标

    var row = btn.parentNode.parentNode;

    //获取这一行的下标

    var index = row.rowIndex;

    //根据下标删除这一行

        tb.deleteRow(index);

   }

   function_up(){

    document.forms[0].submit();

   }

   

</script>

2.UpServlet

package cn.servlet;

public class UpServlet extends HttpServlet {

    protected void doPost(HttpServletRequest request,

           HttpServletResponse response) throws ServletException, IOException{

       request.setCharacterEncoding("UTF-8");

        //获取项目的真实的目录

       String path = getServletContext().getRealPath("/up");

      

       DiskFileItemFactory disk = new DiskFileItemFactory();//声明临时文件

 

        ServletFileUpload sfu = newServletFileUpload(disk);//声明解析request的核心类

 

       try{

           List<FileItem> list = sfu.parseRequest(request);

           //声明一个List集合用于保存上传成功以后的数据

           List<Map<String, Object>> res = newArrayList<Map<String,Object>>();

           Map<String,Object> mm=null;

           //上传

           for(FileItem file:list){

              if(file.isFormField()){

                  //获取说明

                  mm.put("desc", file.getString("UTF-8"));

              }else{

                  //先进入else,因为file在前面

                  mm = new HashMap<String, Object>();

                  String fileName = file.getName();

                  fileName=fileName.substring(fileName.lastIndexOf("\\")+1);

                  mm.put("name",fileName);

                  mm.put("size", file.getSize());

                  mm.put("type", file.getContentType());

                 

                  res.add(mm);

                 

                  InputStream in = file.getInputStream();

                  byte[] b = newbyte[1024];

                  int len = 0;

                  OutputStream out = new FileOutputStream(path+"/"+fileName);

                  while((len=in.read(b))!=-1){

                     out.write(b,0,len);

                  }

                  out.close();

                  in.close();

              }

           }

           //放到request

           request.setAttribute("res", res);

           //转发

           request.getRequestDispatcher("/jsps/show.jsp").forward(request,response);

       }catch(Exception e){

           e.printStackTrace();

       }

    }

}

3.显示页

<body>

   <img src="<c:url value='/up${fileName}'/>"/><br/>

    <c:forEach items="${res}" var="map"varStatus="idx">

        ${idx.count }<br/>

                  名：${map.name }<br/>

             大小：${map.size }<br/>

             类型：${map.type }<br/>

             说明:${map.desc }<br/>

   </c:forEach>

</body>

 

 

 

469187296
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
多个文件上传的功能
03-01
博文链接：https://qmug.iteye.com/blog/225244
SpringMVC之通过最简单的方法实现多文件上传（提供一种模板，可以在这种方法的基础上进行各种的改良）
m0_52479012的博客
11-15 1415
SpringMVC中最为简单的方法，去实现多文件的上传
文件单个上传和多个上传
Lcanglan的博客
05-21 318
//单个上传 package servlet; import javax.servlet.ServletException; import javax.servlet.annotation.MultipartConfig; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; impo...
多文件逐个上传
shaleilei的博客
12-26 815
今天遇到一个问题，客户要求多文件逐个上传，因为如果同时上传会出现高并发的情况，带宽不一定允许，所以采用了逐个下载，自己用的是element框架，但是得分两个按钮才行（先选择文件，再有一个上传按钮）；所以最终使用了原生的方法，方法如下： 注意点：1.需要考虑到超时的问题；2.获取的文件集合是个JSON，并不是数组，所以forEach map这种没法用 HTML代码块 <input type="file" id="file" @change="jsUp" multiple> Javasc
多文件上传的三种方法
兄弟连_战地日记
08-30 1348
这里介绍三种多文件上传的方法，前两种都是直接遍历 三维超全局数组$_FILES，最后一种是先定义一个单文件 上传函数，再循环调用该函数，完成多文件的上传。 1.当多文件上传表单中多个上传文件的name属性为“pic[]”形式时, 也即表单为这种形式： <form action="" method="post" enctype="multipart/form-d
Servlet实现多文件上传功能
08-31
在示例中，有两个文件输入字段，`file1`和`file2`，用户可以上传多个文件。 接下来，我们创建Servlet来处理文件上传。这里有一个名为`FileUpLoad.java`的Servlet示例： ```java package com.servlet.fileupload; ...
使用FormData实现上传多个文件
10-17
本篇文章将详细介绍如何使用`FormData`来实现上传多个文件的功能。 首先，我们要明白`FormData`的基本用法。`FormData`对象用于存储键值对，特别适用于发送数据到服务器，尤其是当数据包含文件时。创建一个`...
使用HTML5实现多文件上传
01-31
在Dojo1.6中有一个崭新的Multi-File Uploader(dojox.form.Uploader)，它具有一个可定制样式的fileinput按钮，可使用多文件选择模式，且完全基于HTML元素。...input一次只能选择并上传单个文件。在新的HTML
实现多文件上传的php类库
04-28
6. **批量操作**：一次性处理多个文件的上传，简化代码。 在使用这个类库时，开发者可以通过实例化类库对象，设置相应的配置参数，然后调用上传方法，将表单中的`<input type="file">`字段传递给类库，即可完成多...
集合到文件【应用】
Leon_Jinhai_Sun的博客
09-13 151
案例需求 把文本文件中的数据读取到集合中，并遍历集合。要求：文件中每一行数据是一个集合元素 实现步骤 创建字符缓冲输入流对象 创建ArrayList集合对象 调用字符缓冲输入流对象的方法读数据 把读取到的字符串数据存储到集合中 释放资源 遍历集合 代码实现 public class TxtToArrayListDemo { public static void main(..
Spring Boot进阶(24)：秒传！快速实现高效多文件上传的最佳解决方案
**My Coding Family**
04-28 7844
springboot项目如何快速实现多文件上传？若不会，我便手把手教你，超级详细，就等你来白嫖。
form表单多文件上传并且存到指定文件夹下
JaxWan的博客
10-08 7417
前端jsp，后台Java。具体步骤如下 1.jsp代码如下，主要设置两个属性，给form表单设置这个属性enctype="multipart/form-data"；给input=file设置multiple="multiple"属性，多文件上传，如果不写这个属性，只能单个上传。 &lt;form method="post" action="photoTestBLH_saveImportDat...
Servlet3文件单个和多个文件上传
kkxxzx的博客
01-13 1298
Servlet3文件单个和多个文件上传 Servlet3.0提供了对文件上传的支持，通过@MultipartConfig 标注和HttpServletRequest的两个新方法getPart()和getParts()，开发者能够很容易实现文件的上传操作。 body> <!-- 表单中enctype="multipart/form-data"的意思，是设置表单的
Java实现上传（支持多个文件同时上传）和下载
热门推荐
冈崎渚的博客
05-08 5万+
文件上传一直是Web项目中必不可少的一项功能。项目结构如下：（这是我之前创建的SSM整合的框架项目，在这上面添加文件上传与下载）主要的是FileUploadController，doupload.jsp,up.jsp,springmvc.xml1.先编写up.jsp&lt;form action="doupload.jsp" enctype="multipart/form-data" method...
vue项目多个文件上传和下载
chenlim87的博客
06-02 2671
vue项目中多文件的上传和下载进度监测
功能：多文件上传，统一提交
snowball的博客
06-07 3001
一、需求：前端实现多文件上传，统一提交上传后服务器返回来的数据，最后一个文件上传完成后立即提交保存，不能间隔时间。二、思路分析：2.1、点击上传-->调用file方法-->调用upload方法，我们定义两个变量flagA和flagB，分别记录两个方法执行的次数，每次执行+=1，file先执行，upload后执行，所以upload方法结束后我们我们比较flagA和flagB的值，如果flagA大于flagB说明还有文件要上传，如果flagA等于flagB说明已经是最后一个文件了。这个时机就是我们调用保存的时机
多文件上传（一个FileUpload 实现上传多个文件）
liuhuan2099的专栏
09-21 1万+
          写一个表示文件的类（CustomFile）来保存上传文件的相关信息。 类定义，FileBytes是二进制文件的数据类型byte[]，FileContentType文件MIME类型，FileSize文件的大小，FullFileName表示带路径的文件全名，最后还有一个SaveAs方法用来保存到服务器指定路径中。接下来的事情就是要把CustomFile这个类的实例都保存
文件上传和多文件上传（使用nio）
han_zheng_yiqi的博客
08-26 1895
文章目录零、文章有点长，但是很全，请耐心观看。一、文件上传（单个）二、配置文件的上传和访问路径1、虚拟访问路径的配置2、使用静态代码块读取路径。三、文件上传（一次多个）四、Result返回值类。 零、文章有点长，但是很全，请耐心观看。 一、文件上传（单个） nio是java自带的，所以不用引入其他依赖。 /** * 文件上传方法 */ public static Result uploading(MultipartFile file) { //获取文件名
html file类型如何一次性上传多个文件
Pumpkin's Blog
06-28 1万+
html file类型如何一次性上传多个文件 又是侯需要上传多个文件 可是默认的文件只能选择一个 这个屎好只需要在input标签里面添加multiple="multiple"就可以了 <input type="file" name="file" multiple="multiple"/> 这样在选择文件的时候按住ctrl就可以选择多个文件了 ...
如何使用Java实现多个文件上传
最新发布
02-22
使用Java实现多个文件上传，可以使用Servlet和JSP，或者使用Apache Commons FileUpload库。Servlet和JSP可以从Web表单接收文件数据，并将其存储到服务器上的文件夹中。Apache Commons FileUpload可以实现多文件上传，并支持文件大小和文件类型限制。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值