HTML5 + jQueryで複数ファイルのアップロード時、プログレスバーを表示

HTML5 + jQueryで複数ファイルのアップロードを試してみました。
CodeIgniter 3 + HTML5 FileAPI + jQueryで複数ファイルのアップロード

アップロードの進捗を表示するプログレスバーを表示してみます。

progress



HTML5で、プログレスバーを表示するタグが追加されました。
これを使用して進捗表示してみます。

今回もCodeIgniter 3と組み合わせて使用してみます。


・application/views/fileupload.php


  1. <html>
  2. <head>
  3.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4.     <title>ファイルアップロード</title>
  5.     <script src="//code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
  6.     <script>
  7. <!--
  8. $(function(){
  9.     
  10.     // ファイルのアップロード処理
  11.     var uploadFiles = function(files) {
  12.         // FormDataオブジェクトを用意
  13.         var fd = new FormData();
  14.         
  15.         // ファイルの個数を取得
  16.         var filesLength = files.length;
  17.  
  18.         // ファイル情報を追加
  19.         for (var i = 0; i < filesLength; i++) {
  20.             console.log(files[i]["name"]);
  21.             fd.append("files[]", files[i]);
  22.         }
  23.  
  24.         // Ajaxでアップロード処理をするファイルへ内容渡す
  25.         $.ajax({
  26.             url: 'fileupload/upload',
  27.             type: 'POST',
  28.             data: fd,
  29.             processData: false,
  30.             contentType: false,
  31.             xhr : function(){
  32.                 var XHR = $.ajaxSettings.xhr();
  33.                 XHR.upload.addEventListener('progress',function(e){
  34.                     var progre = parseInt(e.loaded/e.total * 100);
  35.                     $('#prog').val(progre);
  36.                     $('#pv').html(progre);
  37.                 });
  38.                 return XHR;
  39.             }
  40.             
  41.             
  42.         }).done(function(data) {
  43.             console.log(data);
  44.             
  45.         }).fail(function(data) {
  46.             console.log(data.responseText);
  47.         });
  48.     };
  49.     
  50.     // ファイルドロップ時の処理
  51.     $('#drag-area').on('drop', function(e){
  52.         // デフォルトの挙動を停止
  53.         e.preventDefault();
  54.  
  55.         // ファイル情報を取得
  56.         var files = e.originalEvent.dataTransfer.files;
  57.         uploadFiles(files);
  58.     
  59.     
  60.     // デフォルトの挙動を停止　これがないと、ブラウザーによりファイルが開かれる
  61.     }).on('dragenter', function(){
  62.         return false;
  63.     }).on('dragover', function(){
  64.         return false;
  65.     });
  66.     
  67.     
  68.     // ボタンを押した時の処理
  69.     $('#btn').on('click', function() {
  70.         // ダミーボタンとinput[type="file"]を連動
  71.         $('#file_selecter').click();
  72.     });
  73.  
  74.     $('#file_selecter').on('change', function(){
  75.         // ファイル情報を取得
  76.         var files = this.files;
  77.         uploadFiles(files);
  78.     });
  79.  
  80. });
  81. -->
  82. </script>
  83. </head>
  84. <body>
  85. <div id="drag-area" style="border-style: dashed;background-color: #042943; color: #ffffff;">
  86.  <p>アップロードするファイルをドロップ</p>
  87.  <p>または</p>
  88.  <div class="btn-group">
  89.     <input id="file_selecter" type="file" multiple="multiple" style="display:none;" name="files"/>
  90.     <button id="btn">ファイルを選択</button>
  91.  </div>
  92. </div>
  93. <progress value="0" id="prog" max=100></progress>(<span id="pv" style="color:#00b200">0</span>%)
  94. </body>
  95. </html>




コントローラー側は前回と同様です。

・application/controllers/Fileupload.php


  1. <?php
  3. class Fileupload extends CI_Controller {
  4.     
  5.     // アップロード用の画面を表示
  6.     public function index() {
  7.         $this->load->view('fileupload');
  8.     }
  10.     // 画像アップロード
  11.     public function upload() {
  12.         
  13.         $count = count($_FILES['files']['tmp_name']);
  14.         
  15.         for ($i = 0 ; $i < $count ; $i ++ ) {
  16.             
  17.             $tmp_name = $_FILES["files"]["tmp_name"][$i];
  18.             if (!is_uploaded_file($tmp_name)) {
  19.                 continue;
  20.             }
  21.          
  22.             move_uploaded_file($tmp_name, FCPATH.$_FILES["files"]["name"][$i]);
  23.         }
  24.                 
  25.         // 保存結果を返信
  26.         $this->output
  27.             ->set_content_type('application/json')
  28.             ->set_output(json_encode(['result' => $count]));
  29.         
  30.     }
  31. }




初期表示

690_01.png


ファイルを選択すると、プログレスバーに進捗が表示されました。

690_02.png




PHP Warning: Maximum number of allowable file uploads




複数ファイルをまとめて1回でPOSTするため、
選択したファイルの総容量が大きくなるとサーバー側のPOST値の上限を
あっさり超えてしまいます。
また、phpのデフォルトでは1回のPOSTでアップロードできるファイル数は20個までです。

これらの制約を加味して、プログラムを修正してみました。


  1. <html>
  2. <head>
  3.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4.     <title>ファイルアップロード</title>
  5.     <script src="//code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
  6.     <script>
  7. <!--
  8. $(function(){
  9.     
  10.     // フォームデータのアップロード処理
  11.     var uploadFormData = function(fd, totalBytes, tasks, index) {
  12.         
  13.         var xhr_func = function(){
  14.             var XHR = $.ajaxSettings.xhr();
  15.             XHR.upload.addEventListener('progress',function(e){
  16.                 tasks[index] = e.loaded;
  17.                 
  18.                 var upload = 0;
  19.                 tasks.forEach(function(bytes) {
  20.                     upload += bytes;
  21.                 });
  22.                 
  23.                 var progre = parseInt(upload/totalBytes * 100);
  24.                 
  25.                 $('#prog').val(progre);
  26.                 $('#pv').html(progre);
  27.             });
  28.             return XHR;
  29.         };
  30.         
  31.         
  32.         // Ajaxでアップロード処理をするファイルへ内容渡す
  33.         $.ajax({
  34.             url: 'fileupload/upload',
  35.             type: 'POST',
  36.             data: fd,
  37.             processData: false,
  38.             contentType: false,
  39.             xhr : xhr_func
  40.             
  41.         }).done(function(data) {
  42.             console.log(data);
  43.             
  44.         }).fail(function(data) {
  45.             console.log(data.responseText);
  46.         });
  47.         
  48.     };
  49.     
  50.     
  51.     // ファイルのアップロード処理
  52.     var uploadFiles = function(files) {
  53.         
  54.         // ファイルの個数を取得
  55.         var filesLength = files.length;
  56.         
  57.         // 選択されたファイルの総容量を取得
  58.         var totalBytes = 0;
  59.         for (var i = 0; i < filesLength; i++) {
  60.             totalBytes += files[i].size;
  61.         }
  62.         console.log(totalBytes);
  63.         
  64.         var fd = new FormData();
  65.         var fdBytes = 0;
  66.         var fdCount = 0;
  67.         var tasks = [];
  68.         for (var i = 0; i < filesLength; i++) {
  69.             // 指定バイト数を超えないかチェック
  70.             var currentBytes = files[i].size;
  71.             if (((fdBytes + currentBytes) >= 8000000) || (fdCount >= 20)) {
  72.                 // 超えたらアップロード実行
  73.                 tasks.push(0);
  74.                 uploadFormData(fd, totalBytes, tasks, tasks.length - 1);
  75.                 fd = new FormData();
  76.                 fdBytes = 0;
  77.                 fdCount = 0;
  78.             }
  79.             
  80.             fdBytes += currentBytes;
  81.             fdCount += 1;
  82.             fd.append("files[]", files[i]);
  83.         }
  84.         
  85.         if (fdCount > 0) {
  86.             tasks.push(0);
  87.             uploadFormData(fd, totalBytes, tasks, tasks.length - 1);
  88.         }
  89.     };
  90.     
  91.     // ファイルドロップ時の処理
  92.     $('#drag-area').on('drop', function(e){
  93.         // デフォルトの挙動を停止
  94.         e.preventDefault();
  95.  
  96.         // ファイル情報を取得
  97.         var files = e.originalEvent.dataTransfer.files;
  98.         uploadFiles(files);
  99.     
  100.     
  101.     // デフォルトの挙動を停止　これがないと、ブラウザーによりファイルが開かれる
  102.     }).on('dragenter', function(){
  103.         return false;
  104.     }).on('dragover', function(){
  105.         return false;
  106.     });
  107.     
  108.     
  109.     // ボタンを押した時の処理
  110.     $('#btn').on('click', function() {
  111.         // ダミーボタンとinput[type="file"]を連動
  112.         $('#file_selecter').click();
  113.     });
  114.  
  115.     $('#file_selecter').on('change', function(){
  116.         // ファイル情報を取得
  117.         var files = this.files;
  118.         uploadFiles(files);
  119.     });
  120.  
  121. });
  122. -->
  123. </script>
  124. </head>
  125. <body>
  126. <div id="drag-area" style="border-style: dashed;background-color: #042943; color: #ffffff;">
  127.  <p>アップロードするファイルをドロップ</p>
  128.  <p>または</p>
  129.  <div class="btn-group">
  130.     <input id="file_selecter" type="file" multiple="multiple" style="display:none;" name="files"/>
  131.     <button id="btn">ファイルを選択</button>
  132.  </div>
  133. </div>
  134. <progress value="0" id="prog" max=100></progress>(<span id="pv" style="color:#00b200">0</span>%)
  135. </body>
  136. </html>




これで100ファイルまとめて選択してもアップロードできるようになりました。

ただ、1ファイルで8MB以上だとエラーになります。
これに関しては別の対策を考えてみます。


【参考URL】

$.ajaxファイルアップロードでプログレスバーを表示する。

HTML5 進捗状況を表示するプログレスバーを使ってみる

JavaScript で File API を使用してファイルを読み取る

関連記事
  • 2016/05/18(水) 23:36:38

コメント

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2018/07/15 12:02  by -    編集

トラックバック

この記事にトラックバックする(FC2ブログユーザー)

プロフィール

Author:symfo
blog形式だと探しにくいので、まとめサイト作成中です。
https://symfo.web.fc2.com/

PR

検索フォーム


最新記事

カテゴリ

月別アーカイブ