0前回の投稿(画像ファイルのアップロードの備忘ソース)でhtmlフォームから複数枚の画像ファイルを選択して、サーバにアップロードするソースを紹介しました。その後自分で色々試験していくうちに、やはり2018/4/30現在のAndroidだと複数枚画像選択がイケてない状態であることがわかりました。いうのも、おそらくスマホ内の画像ディレクトリが写真を撮影したデータ、WebやLINEなどから保存したデータなどで散在しており、全ての画像があるディレクトリ(フォト?らいぶらり?)を選択すると結局1枚しか選択できない事象が発生しました。type=fileを増やしていく作戦を取ることにしたのですが、入力フォームが複数あるとどこでどれを選んだか分かりにくいなぁ~と思って、プレビューしようと思ったり、じゃあ選択したやつやっぱ取りやめ~的なこともできないとダメじゃん~っとなったりで、もろもろ修正が入りました。前回のに追加してもよかったのですが、長くなったので別記事にします。APIのところは調べて出てきた記事を引用したのですが、jQueryのタグ操作、classやidの使い方などがセンスないな~と思っています。});}解説それでは1コずつ解説していきます(1)画像選択は複数できる前回の記事で書いてますので、詳しくはそちらを。今回は前回の記事でもAndroidだと実現できない部分のフォローになります。́・ω・`)以下抜粋しますが、upload_image_containerというclass名のdivが1つのフォームのかたまりで、初期状態では2つ目以降にinvisible_containerというclassもつけています。cssでinvisible_containerはdisplay:noneに設定していますので、見えないだけです。</div></div>っで、以下phpで書いていますが、androidで画面表示すると追加するボタンを表示するようにしています。catchでexit相当を実装するとか調べたら出てきたのですが、面倒だったのでフラグにしてしまいました。長いループだと遅くなりそうです。});}ただ、このやり方だと最初からhtmlにinvisible_container部分も記述しておかないといけないので、相当な数のフォームを用意したい場合だと何かしらの方法で動的に生成できる方がよさそうですね、わたしは上限はまあ多くて4枚くらいの写真かなーと思っていたので、この方法にしました。(3)ただし、↑はUSER_AGENTを見てAndroidのみ↑で既に説明済みですが、$_SERVER[“HTTP_USER_AGENT”]を見てAndroidか判定します。中身には以下のようなモノが入っています。Safari/533.1わたしはAndroidスマホだけ対象にしたかったので、preg_matchの反映にMobileを入れましたが、タブレットも対象にしたい場合はAndroidだけで良いようです。APIというのを使います。ここは細かく解説します。type=”file”のonchangeイベントを検知して、jQueryイベントをfunctionに渡します。そのイベントのファイルオブジェクトをぶちこみます。typeのタグにid属性で連番を付与して、何個目のフォームなのかわかるようにしました。画像が選択済みでプレビュー表示されていた場合、もっかい選択され直したら、最初に前回のプレビュー表示をここでクリアしておきます。reader.readAsDataURL(f);}複数枚画像が選択された場合を考慮してforでまわします。APIですね、コイツを生成して、画像の読み込みが完了したら発火するonloadイベント使います。onloadイベントではpreview領域の中に、imgタグを作ってe.target.resultをsrcとします。ここに読み込んだが画像が入っています。$('#delete_button'+id).removeClass('invisible_container');}次の(5)で説明しますが、画像を選択したら、ここで取り消しボタンを表示させます。(5)取り消し的な操作をすると選択がクリアされる最後にコチラ。twitterとかで画像の右上に×印があり、選択した画像を取りやめることが出来ることにあとで気づきました。type=”file”が1つだけで、multipleがうまく機能していれば、選択し直してもらうだけで良かったんですが、2つ以上フォームがある場合は削除できた方がいいなーと思って用意しました。$('#delete_button'+id_num).addClass('invisible_container');}先ほど表示させた取り消しボタンを押すとこちらが呼ばれます。type=”file”のタグを全部作り直すようにしました。コメントをキャンセルメールアドレスが公開されることはありません。FameThemes。