Q&A
調べてもわからなかった時点で、これ以上質問者さんがやれることは無いのではないかと思います。具体的にすべきことを指摘しないような「丸投げ」という指摘には同意できないため、評価上げます。
input/fileタグを使ってローカルの画像をアップロードさせる方法はもちろんわかるのですが、見た目があまり良くないと思っていて、以下のようなアイコンをクリックしたらファイルをアップロードするウィンドウを開くものを作りたいと思っています。
これはnoteというサービスの仕様で、ソースを見るとクリックイベントを設定してアップロードしているようなのですが、どのように記述すればファイルをアップロードするウィンドウを開けるのかがわかりません。
また、いろいろ調べてみたのですが、そのような情報が一切出てこなかったので、ぜひわかる方に教えていただきたいです。
関係あるかわかりませんが、AngularJSで開発をしています。
よろしくお願いいたします。
回答2件
0
HTMLには<input type="file">以外でファイル選択ダイアログを出してファイルをアップロードすることはできないようです。では、色んなサイトはどうしているかというと、inputタグ自体を非表示にして他ボタンから押すようにする、inputタグを動的に生成してすぐさま押したようにする、CSSで見た目を頑張ると言った手段を取っているようです。
それらを簡単に実現してくれるJavaScriptライブラリがあるようですので、それらを使うのが良いでしょう。
- Fine Uploader Javascript Upload Library
- jQuery File Upload AngularJSのサンプルもあります。
他にも探せば色々あるかと思います。検索するときは「JavaScript FileUpload」などのキーワードを使うと良いです。お好みの物を使ってみて下さい。
投稿2016/08/21 00:53
編集2016/08/21 00:57総合スコア21735
ご丁寧に回答いただきありがとうございます。
非表示にしていたり、動的に生成していたりするのですね。大変勉強になりました。
まだまだ勉強しだしたばかりで、検索も試行錯誤しているのですが、なかなか思うようなページが見つからないので本当に助かります。
こちらでご質問させていただいた後も自分でいろいろ探していて、下記ページで「requestFileSystem」というものを見つけたのですが、こちらはinputタグ以外の方法とは異なるものでしょうか？
現在ずっと試しているのですが、肝心のAngularJSの部分でエラーがずっと出てしまっていてこれがなんなのかしっかり確認できていないので、もしご存知でしたらご教示頂けますと幸いです。
・参考ページ
http://qiita.com/mm36/items/a9869a2066ace1aed0a8
requestFileSystem()はFileSystem APIという新しい技術を使っており、現在の所、Chrome以外はサポートしていないようです。また、参考にされているQiitaのページはMonacaというHTML5でアプリを作るフレームワークでの使用例になりますので、通常のWebページにそのまま採用できる物ではありません。
そうなのですか。いろいろとご丁寧に対応いただき本当にありがとうございました。
0
ベストアンサー
これだけで画像をクリックするとアップロードするファイルを選ぶダイアログを画像に置き換えられます。
js
1<label> 2 <input type="file" hidden /> 3 <img src="https://teratail.com/uploads/contributed_images/2f30667621ad090f6cc9240ce3f2eabc.png"> 4</label>
https://jsfiddle.net/b9uu0fs7/
ドラッグアンドドロップしたファイルを保持してそれをサーバに送るなどすれば input なしでもできますが、ダイアログを出すなら input/file を使うしかないと思います。
投稿2016/08/21 02:37
総合スコア604
非常にシンプルでわかりやすいご回答ありがとうございます。
inputを使わないといけないこともわかりましたし、こちらを使用させていただきたいと思います。
ご回答ありがとうございました。
あなたの回答
tips
プレビュー
