77824


spring-bootで複数のファイルを一括してアップロードする際に、個別で進捗を取得する方法はありますか？  
総量の進捗も取得します。

※フォームを分割してアップロードするという方式は取りません。

[code]

    <html>
    <form action="..." method="POST" enctype="multipart/form-data">
    <input type="file" name="files[]"> or <input type="file" name="files" multiple>
    ...
    
[/code]

  * tips 
    1. spring-boot: 2.4.x
    2. java: >= 11


CC BY-SA 4.0
2021-06-21T08:56:59.360
77682
2021-06-27T17:01:13.377
2021-06-21T09:02:18.047
3060
46773
question
java spring-boot
spring-bootでの複数ファイルアップロードの進捗表示


アップロード済みファイルサイズの総量から、個別のファイルアップロード状況を逆算することで求められるかと思います。

[code]

    <html>
      <body>
    <div>
      <form
        id="form"
        method="POST"
        enctype="multipart/form-data"
        action="/upload"
      >
        <table>
          <tr>
            <td>File to upload:</td>
            <td><input id="input" type="file" name="files" multiple /></td>
          </tr>
          <tr>
            <td></td>
            <td><input id="submit" type="submit" value="Upload" /></td>
          </tr>
        </table>
      </form>
    </div>
    <script>
      const form = document.getElementById("form");
      form.addEventListener("submit", (ev) => {
        ev.preventDefault();
        const data = new FormData(form);
        const files = data.getAll("files");
        /* console.log(files); */
    
        const request = new XMLHttpRequest();
        request.upload.addEventListener("progress", (e) => {
          console.log(
            "TOTAL: " + ((100 * e.loaded) / e.total).toFixed(2) + "%"
          );
    
          /* アップロード済みサイズから各ファイルのアップロード状況を逆算 */
          let remain = e.loaded;
          for (const file of files) {
            if (file.size <= remain) {
              console.log(file.name + ": 100.00%");
              remain = remain - file.size;
            } else {
              console.log(
                file.name + ": " + ((100 * remain) / file.size).toFixed(2) + "%"
              );
              remain = 0;
            }
          }
        });
        request.open("POST", "/upload");
        request.send(data);
      });
    </script>
      </body>
    </html>
[/code]


CC BY-SA 4.0
2021-06-27T17:01:13.377
77824
2021-06-27T17:01:13.377
2808
77682
answer