Symfoware

Symfowareについての考察blog

CodeIgniter 3 + HTML5 FileAPI + jQueryで複数ファイルのアップロード

HTML 5で複数選択されたファイルをCodeIgniter 3で受け取るサンプルです。
こちらを参考にさせていただきました。

複数ファイルをドラッグ&ドロップでアップロードするプログラム全体(PHP版)




ソースコード




・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.         for (var i = 0; i < filesLength; i++) {
  19.             console.log(files[i]["name"]);
  20.             fd.append("files[]", files[i]);
  21.         }
  22.         // Ajaxでアップロード処理をするファイルへ内容渡す
  23.         $.ajax({
  24.             url: 'fileupload/upload',
  25.             type: 'POST',
  26.             data: fd,
  27.             processData: false,
  28.             contentType: false
  29.         }).done(function(data) {
  30.             console.log(data);
  31.             
  32.         }).fail(function(data) {
  33.             console.log(data.responseText);
  34.         });
  35.     };
  36.     
  37.     // ファイルドロップ時の処理
  38.     $('#drag-area').on('drop', function(e){
  39.         // デフォルトの挙動を停止
  40.         e.preventDefault();
  41.         // ファイル情報を取得
  42.         var files = e.originalEvent.dataTransfer.files;
  43.         uploadFiles(files);
  44.     
  45.     
  46.     // デフォルトの挙動を停止 これがないと、ブラウザーによりファイルが開かれる
  47.     }).on('dragenter', function(){
  48.         return false;
  49.     }).on('dragover', function(){
  50.         return false;
  51.     });
  52.     
  53.     
  54.     // ボタンを押した時の処理
  55.     $('#btn').on('click', function() {
  56.         // ダミーボタンとinput[type="file"]を連動
  57.         $('#file_selecter').click();
  58.     });
  59.     $('#file_selecter').on('change', function(){
  60.         // ファイル情報を取得
  61.         var files = this.files;
  62.         uploadFiles(files);
  63.     });
  64. });
  65. -->
  66. </script>
  67. </head>
  68. <body>
  69. <div id="drag-area" style="border-style: dashed;background-color: #042943; color: #ffffff;">
  70. <p>アップロードするファイルをドロップ</p>
  71. <p>または</p>
  72. <div class="btn-group">
  73.     <input id="file_selecter" type="file" multiple="multiple" style="display:none;" name="files"/>
  74.     <button id="btn">ファイルを選択</button>
  75. </div>
  76. </div>
  77. </body>
  78. </html>




CodeIgniterにはアップロードファイルに関するライブラリがありますが、
複数ファイルのアップロードでは取り扱いが難しいので、
$_FILESオブジェクトを直接触っています。


・application/controllers/Fileupload.php


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







動作テスト



http://[server]/fileuploadを表示するとこんな画面になります。

689_01.png


ちゃんと複数ファイル選択できますね。

689_02.png


CodeIgniterの設置ディレクトリに無事画像ファイルがアップロードされています。

689_03.png


関連記事

テーマ:プログラミング - ジャンル:コンピュータ

  1. 2016/05/17(火) 23:12:50|
  2. PHP
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集
<<HTML5 + jQueryで複数ファイルのアップロード時、プログレスバーを表示 | ホーム | lftp 隠しファイル(ドットから始まるファイル)もmirrorする>>

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
http://symfoware.blog68.fc2.com/tb.php/1888-ce835ec9
この記事にトラックバックする(FC2ブログユーザー)