CodeIgniter 3 + HTML5 FileAPI + jQueryで複数ファイルのアップロード
HTML 5で複数選択されたファイルをCodeIgniter 3で受け取るサンプルです。こちらを参考にさせていただきました。
複数ファイルをドラッグ＆ドロップでアップロードするプログラム全体（PHP版）
ソースコード
・application/views/fileupload.php
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>ファイルアップロード</title>
- <script src="//code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
- <script>
- <!--
- $(function(){
- // ファイルのアップロード処理
- var uploadFiles = function(files) {
- // FormDataオブジェクトを用意
- var fd = new FormData();
- // ファイルの個数を取得
- var filesLength = files.length;
- // ファイル情報を追加
- for (var i = 0; i < filesLength; i++) {
- console.log(files[i]["name"]);
- fd.append("files[]", files[i]);
- }
- // Ajaxでアップロード処理をするファイルへ内容渡す
- $.ajax({
- url: 'fileupload/upload',
- type: 'POST',
- data: fd,
- processData: false,
- contentType: false
- }).done(function(data) {
- console.log(data);
- }).fail(function(data) {
- console.log(data.responseText);
- });
- };
- // ファイルドロップ時の処理
- $('#drag-area').on('drop', function(e){
- // デフォルトの挙動を停止
- e.preventDefault();
- // ファイル情報を取得
- var files = e.originalEvent.dataTransfer.files;
- uploadFiles(files);
- // デフォルトの挙動を停止 これがないと、ブラウザーによりファイルが開かれる
- }).on('dragenter', function(){
- return false;
- }).on('dragover', function(){
- return false;
- });
- // ボタンを押した時の処理
- $('#btn').on('click', function() {
- // ダミーボタンとinput[type="file"]を連動
- $('#file_selecter').click();
- });
- $('#file_selecter').on('change', function(){
- // ファイル情報を取得
- var files = this.files;
- uploadFiles(files);
- });
- });
- -->
- </script>
- </head>
- <body>
- <div id="drag-area" style="border-style: dashed;background-color: #042943; color: #ffffff;">
- <p>アップロードするファイルをドロップ</p>
- <p>または</p>
- <div class="btn-group">
- <input id="file_selecter" type="file" multiple="multiple" style="display:none;" name="files"/>
- <button id="btn">ファイルを選択</button>
- </div>
- </div>
- </body>
- </html>
CodeIgniterにはアップロードファイルに関するライブラリがありますが、
複数ファイルのアップロードでは取り扱いが難しいので、
$_FILESオブジェクトを直接触っています。
・application/controllers/Fileupload.php
- <?php
- class Fileupload extends CI_Controller {
- // アップロード用の画面を表示
- public function index() {
- $this->load->view('fileupload');
- }
- // 画像アップロード
- public function upload() {
- $count = count($_FILES['files']['tmp_name']);
- for ($i = 0 ; $i < $count ; $i ++ ) {
- $tmp_name = $_FILES["files"]["tmp_name"][$i];
- if (!is_uploaded_file($tmp_name)) {
- continue;
- }
- move_uploaded_file($tmp_name, FCPATH.$_FILES["files"]["name"][$i]);
- }
- // 保存結果を返信
- $this->output
- ->set_content_type('application/json')
- ->set_output(json_encode(['result' => $count]));
- }
- }
動作テスト
http://[server]/fileuploadを表示するとこんな画面になります。
ちゃんと複数ファイル選択できますね。
CodeIgniterの設置ディレクトリに無事画像ファイルがアップロードされています。
- 関連記事
-
- jQuery + FileReader APIでファイルを分割し、バイナリでアップロード
- HTML5 + jQueryで複数ファイルのアップロード時、プログレスバーを表示
- CodeIgniter 3 + HTML5 FileAPI + jQueryで複数ファイルのアップロード
- CodeIgniter3 JSONを返すAPIサーバーとして使用する
- PHP file_get_contentsでAPIサーバーにGET,POST,画像アップロード
コメント