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

仕事でファイルアップロードする機能をオーダーされる事が多くなってきたので、以前作ったソースをバージョンアップさせてみました。 以下は、手軽にファイルアップロードできる方法を書いた記事です。 WEBサイトでページ遷移をせずにファイルをアップロードする方法（サンプルソース付） 以前バージョンは、iframe内にformと"input type=file"タグを書いて、そのままsubmitさせる事で親ページはそのままの状態を保持できるという事で、かなり古いWEBブラウザでも動作する仕様でしたが、複数ファイルをアップロードする際に、写真などをファイル選択をして、その中でいくつかはアップロードしないような処理を追加したい場合、input type=fileタグは、value値を操作することができないので、このままの方法ではできる処理に制限があることがわかりました。 という事で、今回はajaxを使って任意のファイルをアップロードできる方法を模索してみました。

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

FILE-APIは、最近ではほとんどのWEBブラウザが搭載しているので、安心して使えます。 FILE-APIでローカルファイルにアクセスするためには、inputタグのtype=file属性が必要です。 ここでブラウザから、ローカルファイルを選択してもらう必要があります。 ※スマホであれば、その場で写真撮影した画像も使えます。 var fileApi = document.querySelector("input[type='file']").files; console.log(fileApi); これだけで、対象のファイルにアクセスすることが可能になります。 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 上記リファレンスサイトにコードがまるまる書かれているので、そのまま書けば問題なく実行できるでしょう。 コードを転記しておきます。 var formData = new FormData(); formData.append("username", "name"); formData.append("number", 123); // 数値 123456 は直ちに文字列 "123456" へ変換されます // HTML の file input でユーザが選択したファイル formData.append("userfile", fileInputElement.files[0]); // ファイルのような JavaScript オブジェクト var content = '<a id="a"><b id="b">hey!</b></a>'; // 新しいファイルのボディ... var blob = new Blob([content], { type: "text/xml"}); formData.append("webmasterfile", blob); var request = new XMLHttpRequest(); request.open("POST", "http://foo.com/submitform.php"); request.send(formData); appendという命令で、("%key","%value")というinputタグに似た構成を書いてあげるだけで、疑似formが構築できます。 ここにファイルデータを当てはめるには、上記FileAPIで取得したリストをそのままkey=ファイルAPI情報として、代入してあげると、ファイルアタッチができます。 あとはサーバー側で、$_FILES[...]として、受け取りをすれば、ファイルを受信できるようになります。