文件上传和进度条

Posted 2023-02-16

【中文标题】文件上传和进度条

【英文标题】：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

我也在使用 有没有办法一次发送一个文件