正文

文件上传和进度条

 2023-02-16  128

关键词：

【中文标题】文件上传和进度条【英文标题】：File upload and progess bar 【发布时间】：2013-01-21 14:01:05 【问题描述】：

我想在上传文件时根据读取的文件数量显示进度条。

我们如何使用 JS 和 Servlet 来实现这一点我知道上传我可以使用 apache commons lib，但如何根据读取的数据显示进度条。

我是否应该根据读取的数据量向 JS 代码发送计数响应，如果可以，如何实现？或者有人知道更好的选择吗？

【问题讨论】：

【参考方案1】：

我在我的应用程序中使用此代码将进度条动态添加到表格中，我确实剪切了一堆代码，所以可能会遗漏一些东西。您可以在 set_percantage 方法中简单地调用 post 到服务器。

对不起，如果那里还有一些德语，或者如果那里有一两个声明太多了，原来这就像 400 行，填满了一张大桌子。

编辑：我通过applet 获取信息，您可以简单地将post 写入您的服务器

function addDownload(filename, datPfad)  


  var table       = document.getElementById("download_table");
  var body        = table.getElementsByTagName("tbody")[0];

  var progres     = function() 

  var getVars                     = this;    
  this.file                       = filename;

  this.tr                         = document.createElement("tr");

  this.td3                        = document.createElement("td");

  this.progress                   = document.createElement('div');
  this.container                  = document.createElement("div");
  this.progressbar                = document.createElement("div");
  this.bar                        = document.createElement("div");
  this.text                       = document.createElement("div");
  this.path                       = datPfad;

  this.progressbar.style.width     = "100%";
  this.progressbar.style.height    = "20px";
  this.text.style.fontSize         = "10px";

  this.bar.className               = "progress";

  this.progressbar.appendChild(this.bar);


  this.text.style.marginTop        = "-19px"
  this.text.style.textAlign        = "center";
  this.text.style.textSize         = "15px";


  this.text.appendChild(document.createTextNode("Download starting"));
  this.progressbar.appendChild(this.text);

  this.container.appendChild(this.progressbar);

  this.td3.appendChild(this.container);

  this.td3.setAttribute("width", "32%");

  this.tr.appendChild(this.td3);

  this.tr.setAttribute("style", "background:rgb(245, 245, 245)");

  this.tr.setAttribute("id",filename);

  body.appendChild(this.tr);

  this.set_percantage = function() 
          progress                = document.jsap.getProgress(getVars.file);
          this.bar.style.width    = progress + "%";
          downloaded              = document.jsap.getDownloadedSize(getVars.file);
          filesize                = document.jsap.getDownloadSize(getVars.file);
          this.text.removeChild(this.text.firstChild);
          textnode = (downloaded == 0.0 || filesize == -1.0) ? "Download starting" : downloaded + " MB of " + filesize + " MB downloaded";
          this.text.appendChild(document.createTextNode(textnode));
          if(downloaded >= filesize && downloaded != 0) 
              row.beendet();
          


  

  this.interval = window.setInterval(function() 
      if(boxbuffer.innerHTML == "finished") 
          window.clearInterval(this.interval);
      
      row.set_percantage();
  ,2000);

我忘记了这里的 css 类：

.progress 
            width:0%;
            height:100%;
           background: rgb(30,205,230); /* Old browsers */
            /* IE9 SVG, needs conditional override of 'filter' to 'none' */
            background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMWVjZGU2IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzVhOWNmYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
            background: -moz-linear-gradient(38deg, rgba(30,205,230,1) 0%, rgba(90,156,250,1) 100%); /* FF3.6+ */
            background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(30,205,230,1)), color-stop(100%,rgba(90,156,250,1))); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(38deg, rgba(30,205,230,1) 0%,rgba(90,156,250,1) 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(38deg, rgba(30,205,230,1) 0%,rgba(90,156,250,1) 100%); /* Opera 11.10+ */
            background: -ms-linear-gradient(38deg, rgba(30,205,230,1) 0%,rgba(90,156,250,1) 100%); /* IE10+ */
            background: linear-gradient(38deg, rgba(30,205,230,1) 0%,rgba(90,156,250,1) 100%); /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1ecde6', endColorstr='#5a9cfa',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
            z-index:2;

所以，我基本上在做的是，我创建了一个宽度为 0% 的 div 元素。 xml 将下载文件的 procentual 返回给我。基于这个数字，我正在增加 div 元素的宽度。

【讨论】：

感谢凯文，这很有帮助但是可以说我有多个文件上传，我必须显示尽可能多的进度条作为文件有什么我应该使用的逻辑我可以动态生成"" 每个文件的这个 div 我也在使用有没有办法一次发送一个文件

文件上传进度条干扰控制器重定向

】文件上传进度条干扰控制器重定向【英文标题】：FileuploadprogressbarinterfereswithControllerredirect【发布时间】：2021-11-1610:23:43【问题描述】：我有一个文件提交表单和一个跟踪上传进度的进度条。但是，控制进度条的javascript会干扰... 查看详情

php使用进度条上传文件-php和jquery(代码片段)

查看详情

使用 XMLHttpRequest 上传大文件时的进度条

】使用XMLHttpRequest上传大文件时的进度条【英文标题】：ProgressbarwhileuploadinglargefileswithXMLHttpRequest【发布时间】：2013-04-0415:27:08【问题描述】：我正在尝试使用XMLHttpRequest和file.slice将一些大文件上传到服务器。我已经在文档和其... 查看详情

具有多个不同输入的文件上传进度条（MVC）

】具有多个不同输入的文件上传进度条（MVC）【英文标题】：FileUploadProgressBarwithMultipleandDifferentInputs(MVC)【发布时间】：2020-04-3020:49:48【问题描述】：我在互联网上搜索了这个JavaScript和jQuery模板，用于文件上传进度条，它可以100... 查看详情

带有节点（socket.io 和强大）和 ajax 的文件上传进度条

】带有节点（socket.io和强大）和ajax的文件上传进度条【英文标题】：afileuploadprogressbarwithnode(socket.ioandformidable)andajax【发布时间】：2014-06-0308:24:15【问题描述】：我正在自学一些Ajax，本课需要在本地构建一个简单的文件上传表单... 查看详情

jQuery 文件上传插件 - 开始/取消按钮和进度条不起作用

】jQuery文件上传插件-开始/取消按钮和进度条不起作用【英文标题】：jQueryfileuploadplugin-Start/CancelbuttonandProgressbardonotwork【发布时间】：2014-02-0913:18:17【问题描述】：在文档事件就绪时，问题是：TypeError:this.element.find(...).find(...).ea... 查看详情

Flutter 上传带有进度条的大文件。 App 和 Web 都支持

】Flutter上传带有进度条的大文件。App和Web都支持【英文标题】：Flutteruploadlargefilewithprogressbar.AppandWebbothsupport【发布时间】：2021-06-2304:49:49【问题描述】：我遇到上传大文件的问题。当从应用程序上传文件工作正常但网络挂起时... 查看详情

使用 RestTemplate.postForLocation 的文件上传进度条

】使用RestTemplate.postForLocation的文件上传进度条【英文标题】：FileuploadprogressbarusingRestTemplate.postForLocation【发布时间】：2012-12-0217:15:29【问题描述】：我有一个将文件上传到REST服务的Java桌面客户端应用程序。所有对REST服务的调... 查看详情

前端上传文件实时显示进度条和上传速度的工作原理是怎样的？

参考技术A后端的责任。前端上传文件实时显示进度条和上传速度的工作原理就是后端的责任，在Django中实现需要重载上传文件的函数，在上传时文件是被分成数个MB的chunk处理的，每次都会调用这个上传函数。也就是说，每处理... 查看详情

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

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

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

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

HTML5：带有进度条的 AJAX 文件上传

】HTML5：带有进度条的AJAX文件上传【英文标题】：HTML5:AJAXfileuploadwithprogressbar【发布时间】：2011-11-0602:38:13【问题描述】：我正在寻找一个带有HTML5进度条的文件上传器。我尝试使用其他地方的一些教程，包括SO。ThisSOanswer（被接... 查看详情

使用 jQuery 的文件上传进度条

】使用jQuery的文件上传进度条【英文标题】：FileuploadprogressbarwithjQuery【发布时间】：2013-03-0220:39:19【问题描述】：我正在尝试在我的项目中实现AJAX文件上传功能。我为此使用jQuery；我的代码使用AJAX提交数据。我还想实现一个文... 查看详情

使用 jQuery 的文件上传进度条

js文件上传进度条

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>XMLHttpRequest上传文件进度实现</title><scripttype="text/javascript">varxhr;varot;//varoloaded;//上传文件方法functionUp 查看详情

使用 PHP 5.4 中的 session 和 codeigniter 上传进度条

...Codeigniter中工作。我没有开始让它在CI中工作。我想上传文件并跟踪进度。在我的CI视图中< 查看详情

MVC 文件上传的引导进度条

】MVC文件上传的引导进度条【英文标题】：BootstrapProgressBarforMVCFileUpload【发布时间】：2014-08-2402:38:06【问题描述】：有没有一种简单的方法可以在文件加载时显示阻塞的Bootstrap进度条？上传文件时，进度会显示在chrome的状态栏中... 查看详情

使用 jquery ui 进度条上传文件

】使用jqueryui进度条上传文件【英文标题】：fileuploadwithjqueryuiprogressbar【发布时间】：2011-01-2015:13:55【问题描述】：我正在使用jCrop，我想为图片上传添加一个进度条，如何让jqueryui进度条加载图片字节？【问题讨论】：我相信这... 查看详情