正文 

当前位置： 首页 > java > java教程

java多文件上传显示进度条

author author     2023-05-01     376

关键词：

用java或者js实现对多文件上传，并显示进度条，可以只显示总进度。手上有类似代码的朋友联系我，扣-15080818，跪求！

使用   apache fileupload   ,spring MVC   jquery1.6x , bootstrap  实现一个带进度条的多文件上传，由于fileupload 的局限，暂不能实现每个上传文件都显示进度条，只能实现一个总的进度条，效果如图：

1、jsp 页面

<!DOCTYPE html>  
<%@ page contentType="text/html;charset=UTF-8"%>    
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>    
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
<script src="../js/jquery-1.6.4.js" type="text/javascript"></script>  
<link rel="stylesheet" type="text/css" href="../css/bootstrap.css"/>  
</head>  
<body>  
        <form id=\'fForm\' class="form-actions form-horizontal" action="../upload.html"   
              encType="multipart/form-data" target="uploadf" method="post">  
                 <div class="control-group">  
                    <label class="control-label">上传文件:</label>  
                    <div class="controls">  
                        <input type="file"  name="file" style="width:550">  
                              
                    </div>  
                    <div class="controls">  
                        <input type="file"  name="file" style="width:550">  
                    </div>  
                    <div class="controls">  
                        <input type="file"  name="file" style="width:550">  
                    </div>  
                    <label class="control-label">上传进度:</label>  
                    <div class="controls">  
                        <div  class="progress progress-success progress-striped" style="width:50%">  
                            <div  id = \'proBar\' class="bar" style="width: 0%"></div>  
                        </div>  
                    </div>  
                </div>  
                  
                 <div class="control-group">  
                    <div class="controls">  
                    <button type="button" id="subbut" class="btn">submit</button>  
                    </div>  
                </div>  
        </form>  
        <iframe name="uploadf" style="display:none"></iframe>  
</body>  
</html>  
<script >  
$(document).ready(function()  
    $(\'#subbut\').bind(\'click\',  
            function()  
                $(\'#fForm\').submit();  
                var eventFun = function()  
                    $.ajax(  
                        type: \'GET\',  
                        url: \'../process.json\',  
                        data: ,  
                        dataType: \'json\',  
                        success : function(data)  
                                $(\'#proBar\').css(\'width\',data.rate+\'\'+\'%\');  
                                $(\'#proBar\').empty();  
                                $(\'#proBar\').append(data.show);   
                                if(data.rate == 100)  
                                    window.clearInterval(intId);  
                                     
                );;  
                var intId = window.setInterval(eventFun,500);  
    );  
);  
</script>

2、java 代码

package com.controller;  
  
import java.util.List;  
  
import javax.servlet.http.HttpServletRequest;  
import javax.servlet.http.HttpServletResponse;  
import javax.servlet.http.HttpSession;  
  
import org.apache.commons.fileupload.FileItemFactory;  
import org.apache.commons.fileupload.ProgressListener;  
import org.apache.commons.fileupload.disk.DiskFileItemFactory;  
import org.apache.commons.fileupload.servlet.ServletFileUpload;  
import org.apache.log4j.Logger;  
import org.springframework.stereotype.Controller;  
import org.springframework.web.bind.annotation.RequestMapping;  
import org.springframework.web.bind.annotation.RequestMethod;  
import org.springframework.web.bind.annotation.ResponseBody;  
import org.springframework.web.servlet.ModelAndView;  
  
@Controller  
public class FileUploadController   
    Logger log = Logger.getLogger(FileUploadController.class);  
      
    /** 
     * upload  上传文件 
     * @param request 
     * @param response 
     * @return 
     * @throws Exception 
     */  
    @RequestMapping(value = "/upload.html", method = RequestMethod.POST)  
    public ModelAndView upload(HttpServletRequest request,  
            HttpServletResponse response) throws Exception   
        final HttpSession hs = request.getSession();  
        ModelAndView mv = new ModelAndView();  
        boolean isMultipart = ServletFileUpload.isMultipartContent(request);  
        if(!isMultipart)  
            return mv;  
          
        // Create a factory for disk-based file items  
        FileItemFactory factory = new DiskFileItemFactory();  
  
        // Create a new file upload handler  
        ServletFileUpload upload = new ServletFileUpload(factory);  
        upload.setProgressListener(new ProgressListener()  
               public void update(long pBytesRead, long pContentLength, int pItems)   
                   ProcessInfo pri = new ProcessInfo();  
                   pri.itemNum = pItems;  
                   pri.readSize = pBytesRead;  
                   pri.totalSize = pContentLength;  
                   pri.show = pBytesRead+"/"+pContentLength+" byte";  
                   pri.rate = Math.round(new Float(pBytesRead) / new Float(pContentLength)*100);  
                   hs.setAttribute("proInfo", pri);  
                 
            );  
        List items = upload.parseRequest(request);  
        // Parse the request  
        // Process the uploaded items  
//      Iterator iter = items.iterator();  
//      while (iter.hasNext())   
//          FileItem item = (FileItem) iter.next();  
//          if (item.isFormField())   
//              String name = item.getFieldName();  
//              String value = item.getString();  
//              System.out.println("this is common feild!"+name+"="+value);  
//           else   
//              System.out.println("this is file feild!");  
//               String fieldName = item.getFieldName();  
//                  String fileName = item.getName();  
//                  String contentType = item.getContentType();  
//                  boolean isInMemory = item.isInMemory();  
//                  long sizeInBytes = item.getSize();  
//                  File uploadedFile = new File("c://"+fileName);  
//                  item.write(uploadedFile);  
//            
//        
        return mv;  
      
      
      
    /** 
     * process 获取进度 
     * @param request 
     * @param response 
     * @return 
     * @throws Exception 
     */  
    @RequestMapping(value = "/process.json", method = RequestMethod.GET)  
    @ResponseBody  
    public Object process(HttpServletRequest request,  
            HttpServletResponse response) throws Exception   
        return ( ProcessInfo)request.getSession().getAttribute("proInfo");  
      
      
    class ProcessInfo  
        public long totalSize = 1;  
        public long readSize = 0;  
        public String show = "";  
        public int itemNum = 0;  
        public int rate = 0;  
      
      
 参考技术A 可以使用　swfupload 自己多查查，也比较简单，文档相对也比较全 参考技术B jQuery-File-Upload 参考技术C 答案 已经给你发了 请查收

如何在jsp和servlet中显示文件上传进度条并实现了多部分过滤器？

】如何在jsp和servlet中显示文件上传进度条并实现了多部分过滤器？【英文标题】：Howtoshowafileuploadprogressbarinjspandservletwithamultipartfilterimplemented?【发布时间】：2013-02-2715:57:41【问题描述】：我正在使用jsp和servlet处理文件上传任务... 查看详情

显示多文件上传 Jquery/Ajax 的进度

】显示多文件上传Jquery/Ajax的进度【英文标题】：ShowaprogressonmultiplefileuploadJquery/Ajax【发布时间】：2014-06-0619:04:36【问题描述】：我有允许用户上传多个文件的上传表单。我决定如果文件很大，进度条会很好。下面是我的源代码... 查看详情

使用 Java 上传文件（带进度条）

】使用Java上传文件（带进度条）【英文标题】：FileUploadwithJava(withprogressbar)【发布时间】：2010-09-2006:17:55【问题描述】：我对Java非常陌生，而且我主要是边学边自学，所以我开始构建一个小程序。我想做一个可以从本地磁盘中... 查看详情

elementel-upload自定义上传显示进度条，多文件上传进度(代码片段)

...d="true"><el-buttonslot="trigger"size="small"type="primary">选取文件</el-button></el-upload></div></template><script>exportdefaultdata()returnfileList:[],,components:,mounted(),methods:customUpload(file)letFormDatas=newFormData();FormDatas.append(‘file‘... 查看详情

javaftp上传文件（进度条显示进度）

<spanstyle="font-family:Arial,Helvetica,sans-serif;background-color:rgb(255,255,255);">java实现FTP上传有2种方式，一种是org.apache.commons.net.ftp.FTPClient这个jar包，一种是sun.net.ftp.Ftp 查看详情

javaftp上传文件（进度条显示进度）

<spanstyle="font-family:Arial,Helvetica,sans-serif;background-color:rgb(255,255,255);">java实现FTP上传有2种方式，一种是org.apache.commons.net.ftp.FTPClient这个jar包，一种是sun.net.ftp.Ftp 查看详情

javaftp上传文件（进度条显示进度）

<spanstyle="font-family:Arial,Helvetica,sans-serif;background-color:rgb(255,255,255);">java实现FTP上传有2种方式，一种是org.apache.commons.net.ftp.FTPClient这个jar包，一种是sun.net.ftp.Ftp 查看详情

Flutter Web 多部分formdata文件上传进度条

】FlutterWeb多部分formdata文件上传进度条【英文标题】：FlutterWebmultipartformdatafileuploadprogressbar【发布时间】：2021-05-1812:46:12【问题描述】：我正在使用Flutterweb和strapiheadlesscms作为后端。我能够成功发送文件，但想要它的进度指示。... 查看详情

如何在ajax文件上传中显示进度条

】如何在ajax文件上传中显示进度条【英文标题】：Howtoshowprogressbarinajaxfileupload【发布时间】：2013-01-2605:22:52【问题描述】：我的代码发布了ajax请求，但没有显示进度条。请帮助更正代码以显示工作进度条。$(document).ready(function()... 查看详情

springmvc带进度条的多文件上传

1、关于文件上传进度条的实现在说SpringMVC文件上传尤其是带滚动条之前先用servlet做一个简单的文件上传并返回进度信息这样的功能。（1）需要两个包：commons-fileupload-1.3.1.jarcommons-io-1.4.jar上面这两个包是Apache推出的... 查看详情

中止多文件上传 AJAX 请求

】中止多文件上传AJAX请求【英文标题】：AbortamultiplefileuploadAJAXrequest【发布时间】：2015-01-0222:44:45【问题描述】：我正在尝试使用进度条中止多文件上传，显示过程状态。我想要实现的是在中止按钮单击时完全中止多个文件上传... 查看详情

struts2文件上传进度条显示

参考成功博客：http://blog.sina.com.cn/s/blog_bca9d7e80101bkko.html待测试博客：http://blog.csdn.net/z69183787/article/details/52536255Struts2文件上传进度条显示 查看详情

java上传excel文件，如何实现进度条显示？

比如，Excel有100条数据，上传20条时显示20%，并且支持后面带“×”按钮，以结束上传。有知道留下联系方式，可以追加分。参考技术A您好，1、开发简单，由于要定时起一个HTTP连接去获得进度信息，因此，发生的连接请求也增多... 查看详情

文件上传和进度条

】文件上传和进度条【英文标题】：Fileuploadandprogessbar【发布时间】：2013-01-2114:01:05【问题描述】：我想在上传文件时根据读取的文件数量显示进度条。我们如何使用JS和Servlet来实现这一点我知道上传我可以使用apachecommonslib，但... 查看详情

如何在 Django 中上传文件并显示进度条？

】如何在Django中上传文件并显示进度条？【英文标题】：HowtouploadafileandshowprogressbarinDjango?【发布时间】：2011-07-0117:28:33【问题描述】：我已经编写了在Django中上传文件的代码，如下所示：defupload(request):ifrequest.method==\'POST\':form=Up... 查看详情

java文件上传下载用哪种技术好？

...动尝试重练（设定次数内），三、需要支持一次上传多个文件；四、上传需要有进度条显示给用户；五、支持单线程或多线程文件上传（可配置）；六、上传服务需要是一个独立于系统之外的服务；等。。。大侠们知道用什么技... 查看详情

使用引导进度条以模态显示上传进度

...一个c#MVC应用程序，它显示一个表单并允许用户上传一些文件。当用户点击提交时，会出现一个带有进度条的模式，设置为100%并显示一条消息“请稍候，等等。”我希望能够捕获上传过程的进度并将其显示在模态的进度条中。所... 查看详情

如何通过 ASP.NET MVC 上传文件并显示进度条？

】如何通过ASP.NETMVC上传文件并显示进度条？【英文标题】：HowcanIuploadafileviaASP.NETMVCandshowaprogressbar?【发布时间】：2010-11-0122:56:22【问题描述】：我希望允许用户在我的ASP.NETMVC应用程序中浏览文件并将其上传到服务器。如果可能... 查看详情