質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.53%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

Q&A

解決済

2回答

17530閲覧

input/fileタグを使わないでローカルから画像をアップロードさせる方法を教えてください。

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

2グッド

0クリップ

投稿2016/08/20 23:44

input/fileタグを使ってローカルの画像をアップロードさせる方法はもちろんわかるのですが、見た目があまり良くないと思っていて、以下のようなアイコンをクリックしたらファイルをアップロードするウィンドウを開くものを作りたいと思っています。

画像アップロードアイコン

これはnoteというサービスの仕様で、ソースを見るとクリックイベントを設定してアップロードしているようなのですが、どのように記述すればファイルをアップロードするウィンドウを開けるのかがわかりません。
また、いろいろ調べてみたのですが、そのような情報が一切出てこなかったので、ぜひわかる方に教えていただきたいです。
関係あるかわかりませんが、AngularJSで開発をしています。

よろしくお願いいたします。

zonoji, raccy👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

raccy

2016/08/21 00:59

調べてもわからなかった時点で、これ以上質問者さんがやれることは無いのではないかと思います。具体的にすべきことを指摘しないような「丸投げ」という指摘には同意できないため、評価上げます。
guest

回答2

3

HTMLには<input type="file">以外でファイル選択ダイアログを出してファイルをアップロードすることはできないようです。では、色んなサイトはどうしているかというと、inputタグ自体を非表示にして他ボタンから押すようにする、inputタグを動的に生成してすぐさま押したようにする、CSSで見た目を頑張ると言った手段を取っているようです。

それらを簡単に実現してくれるJavaScriptライブラリがあるようですので、それらを使うのが良いでしょう。

他にも探せば色々あるかと思います。検索するときは「JavaScript FileUpload」などのキーワードを使うと良いです。お好みの物を使ってみて下さい。

投稿2016/08/21 00:53

編集2016/08/21 00:57
raccy

総合スコア21733

YukaOkada, zonoji, kei344👍を押しています

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/08/21 02:40

ご丁寧に回答いただきありがとうございます。 非表示にしていたり、動的に生成していたりするのですね。大変勉強になりました。 まだまだ勉強しだしたばかりで、検索も試行錯誤しているのですが、なかなか思うようなページが見つからないので本当に助かります。 こちらでご質問させていただいた後も自分でいろいろ探していて、下記ページで「requestFileSystem」というものを見つけたのですが、こちらはinputタグ以外の方法とは異なるものでしょうか? 現在ずっと試しているのですが、肝心のAngularJSの部分でエラーがずっと出てしまっていてこれがなんなのかしっかり確認できていないので、もしご存知でしたらご教示頂けますと幸いです。 ・参考ページ http://qiita.com/mm36/items/a9869a2066ace1aed0a8
raccy

2016/08/21 03:02 編集

requestFileSystem()はFileSystem APIという新しい技術を使っており、現在の所、Chrome以外はサポートしていないようです。また、参考にされているQiitaのページはMonacaというHTML5でアプリを作るフレームワークでの使用例になりますので、通常のWebページにそのまま採用できる物ではありません。
退会済みユーザー

退会済みユーザー

2016/08/21 03:11

そうなのですか。いろいろとご丁寧に対応いただき本当にありがとうございました。
guest

2

ベストアンサー

これだけで画像をクリックするとアップロードするファイルを選ぶダイアログを画像に置き換えられます。

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

lazex

総合スコア604

zonoji, kei344👍を押しています

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/08/21 03:13

非常にシンプルでわかりやすいご回答ありがとうございます。 inputを使わないといけないこともわかりましたし、こちらを使用させていただきたいと思います。 ご回答ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.53%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。