Edited at

AJAXを用いたファイルアップローダー(複数ファイル対応)の初歩の初歩の初歩


始めに

大容量の画像をアップするときに、読み込み中のままでは不満だったので、アップロードしたときにAjaxを利用して「しばらくお待ちください」→「画像がアップされました」とお知らせするアップローダーが欲しかったのですが、ズバリそのもののソースコードがなかったので他のサイトを参考に自分で作ってみました。


ソース

GitHubにファイルをアップしていますので詳細やテストはそちらを参考にいただきたく。ご自由に使って頂きたいのですが、それによって発生した損害は関知しないので念のため。

git crone https://github.com/emesh0620/FILE_AJAX_UPLOADER.git

または、https://github.com/emesh0620/FILE_AJAX_UPLOADER からダウンロードすることに出来ます。

「複数のファイルのアップロードはどうやって?」思ったのですが、まずindex.htmlにあるフォームのnameを配列にして

<input type="file" name="upfile[]" value="" multiple="multiple" id="article_image_file_name" /></p>

PHP部分では

for ($i = 0; $i< count($_FILES["upfile"]["tmp_name"]); $i++) {

\\アップロードに関する処理
}

のようにforで回せば普通に出来るようです。ちなみに、このプログラムではPHP部分には保存先フォルダが無ければ作成するようにしております。


終わりに

これはタイトルの通りにあくまでも初歩の初歩の初歩のもので、安全に運用するアップローダーとするためには色々な改良などを加える必要性があります。


参考サイト

https://tadworks.jp/archives/1846 -AJAX部分の参考

https://www.webdlab.com/labs/form-file-upload/ - PHP部分の参考