【スマホ】htmlで画像アップ時のファイル選択方法の制御

Question

LINEやFacebookなどのSNSでメディアファイルを添付する際のUIですが、上記の様な物がよくあるUIだと思います。

これをWeb（Html）でも再現をしようと思ったのですが、Jqueryのプラグイン等で見つけられませんでした。
スマホからのアップロード時はこの方法がとてもユーザーフレンドリーだと思うのですが、難しいのでしょうか。

ただやるとするとスマートフォンのブラウザ（？）でのファイル選択の挙動の制御になると思うので、
変更できないのかなと予想をしてもいます。

スマホのアプリであれば制御できるが、Webブラウザアプリでは制御ができない、ということかなと。
もしそうでないのであれば制御方法を知りたいと思っています。

よろしくお願いします。

Comments

[thyda.eiqau]

現状どのようなコードで、どのような画面になるのですか？<input type="file" accept="image/*" multiple> で似たようなUIになると思うのですが……
あと、対応させたいブラウザは何でしょうか。Android Chrome, Android標準ブラウザ, iOS Safari, iOS Chrome, など

Answer 1

アップロード前の画像は、スマホ内だけに存在するわけで、
それをwebサーバー側の処理でどうかできるわけじゃないことはわかりますよねぇ。

htmlフォームでのファイルアップロードの仕組みに乗っかるのであれば、
ファイルを選択する場面はOS依存のUIになるので、
その場面をjQueryなど持ち込んでも制御ってできない気がします。

スマホのファイル選択をカスタマイズするには、
ローカルのファイルにアクセス可能なアプリとして作れば良さそうですが、
調べるとHTML5としてFile APIを駆使すればできるのかもしれません。
実装例を探そうとしましたが、まだ見つけられず。

Comments

[yoshihiro_yy]

>ファイルを選択する場面はOS依存のUIになるので、
そうですよね。PCとスマホでも大きく違いますし、スマホもiOSとAndroidでもまた違いますしね。。。

フロントエンドは囓ったくらいの知識しかないので、私が知らないだけで方法があるのかなと思ったのですが、やはり難しそうですか。

>調べるとHTML5としてFile APIを駆使すればできるのかもしれません。
>実装例を探そうとしましたが、まだ見つけられず。

わざわざお調べ頂いてすみません。
私の方でも頂いたキーワードで調べてみます。

もしできる方法、もしくは出来ないという決定的な情報があればまた教えて頂ければと思います。