[Javascript] もっと便利にサーバーにファイルをアップロードする方法

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

仕事でファイルアップロードする機能をオーダーされる事が多くなってきたので、以前作ったソースをバージョンアップさせてみました。
 

以下は、手軽にファイルアップロードできる方法を書いた記事です。
WEBサイトでページ遷移をせずにファイルをアップロードする方法(サンプルソース付)
 

以前バージョンは、iframe内にformと”input type=file”タグを書いて、そのままsubmitさせる事で親ページはそのままの状態を保持できるという事で、かなり古いWEBブラウザでも動作する仕様でしたが、複数ファイルをアップロードする際に、写真などをファイル選択をして、その中でいくつかはアップロードしないような処理を追加したい場合、input type=fileタグは、value値を操作することができないので、このままの方法ではできる処理に制限があることがわかりました。
 

という事で、今回はajaxを使って任意のファイルをアップロードできる方法を模索してみました。

FILE-APIを使って、アップロードするファイルを選択

FILE-APIは、最近ではほとんどのWEBブラウザが搭載しているので、安心して使えます。
 

FILE-APIでローカルファイルにアクセスするためには、inputタグのtype=file属性が必要です。
 

ここでブラウザから、ローカルファイルを選択してもらう必要があります。
※スマホであれば、その場で写真撮影した画像も使えます。
 

 

これだけで、対象のファイルにアクセスすることが可能になります。
 

multiple属性をつけていると、複数のファイルアクセスも可能になるので、1つずつajaxを使ってサーバーにアップロードすることで、送信するファイルとそうでないファイルを選別することも可能になります。
 

一昔前のiPhoneでは使えなかったのですが、これも最近機能開放されて、スマホでもほぼ問題ないので、今回の機能が鉄板になりそうです。

Ajaxでファイルをアップロードする方法

AJAXを使ったファイルのアップロードは、既存のformデータをそのまま使うのではなく、”FormData”を使って仮想のform環境を構築する必要があります。
 

やり方は非常に簡単で、
https://developer.mozilla.org/ja/docs/Web/Guide/Using_FormData_Objects#Creating_a_FormData_object_from_scratch
上記リファレンスサイトにコードがまるまる書かれているので、そのまま書けば問題なく実行できるでしょう。
 

コードを転記しておきます。
 

 

appendという命令で、(“%key”,”%value”)というinputタグに似た構成を書いてあげるだけで、疑似formが構築できます。
 

ここにファイルデータを当てはめるには、上記FileAPIで取得したリストをそのままkey=ファイルAPI情報として、代入してあげると、ファイルアタッチができます。
 

あとはサーバー側で、$_FILES[…]として、受け取りをすれば、ファイルを受信できるようになります。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です