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

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

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

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

5回答

4897閲覧

<input type="file">を使って画像を表示したい

k499778

総合スコア599

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2016/04/22 20:56

現在HTML,Javascript(jQuery)を使って画像アップロードアプリを作っています。

<input type="file">を使って画像をローカルフォルダから取得し、
その画像を画面に表示したい
と思っています。

JavaScriptやjQueryを使ってやるのかなと思って調べているのですが、
そのやり方になかなか行き着きません。

もしわかる方や参考サイトでもいいので知っていらっしゃる方がいらっしゃいましたら教えていただけるとありがたいです。

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

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

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

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

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

guest

回答5

0

https://blueimp.github.io/jQuery-File-Upload/
にあるデモを研究しみては如何でしょう?
このデモでは、ファイルを選択すると、縮小画像が表示されます。

イメージ説明

投稿2016/04/23 06:37

katoy

総合スコア22324

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

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

k499778

2016/04/24 12:21

回答ありがとうございます。 このサイトの方法も参考にしていいファイルアップロードの実装を実現したいと思います。ありがとうございました!
guest

0

<input type="file">ユーザーが選んだ画像については、JavaScriptのFile APIを使って読み出すことができます(実装例)。

セキュリティ上、(通常のWebページの場合)JavaScriptから勝手なファイルを読み出す方法はありません。

投稿2016/04/23 04:35

maisumakun

総合スコア145121

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

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

k499778

2016/04/24 12:19

回答ありがとうございます。 FileAPIを今勉強していて、これを使って画像のサムネイルを表示することができました。 1つお聞きしたいのですが、 JavaScriptから勝手なファイルを読み出す方法はありません。とはどういうことでしょうか? ローカルフォルダの画像は勝手なファイルに当たるのでしょうか? FileAPIを利用して画像のサムネイルを表示するのは非推奨なのでしょうか?
guest

0

基本的に、画像などのコンテンツはサーバーに一度アップロードしてから、そのURLを返してもらって始めて表示が可能になります。
http://qiita.com/BRS_matsuoka/items/ba79a2f500a10ddc0923

File APIを使うとローカル(ブラウザを起動しているPC)のファイルシステムにアクセスできるらしいですが、セキュリティー的にまずいのでブラウザによっては対応していなかったり、特別な設定をしないと有効にならないため一般的ではありません。
http://ascii.jp/elem/000/000/559/559105/

投稿2016/04/22 23:48

CodeLab

総合スコア1939

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

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

k499778

2016/04/24 12:15

回答ありがとうございます。 おかげさまでファイルアップロードの常識を知ることができました。 それも踏まえて実装していきたいと思います。
guest

0

ベストアンサー

WEBサイトの場合、画像を表示するということは
『サーバーにあるファイルを表示する』ことになるので
<input type="file">で画像を表示する場合、以下のような
処理が必要になるとおもいます。

1.ブラウザ側で<input type="file">で画像を指定する
2.ブラウザ側で画像をアップロードする
3.サーバ側で画像を受信する
4.ブラウザ側で画像を表示する
という流れになります。

以下のサイトが参考になると思います。

http://hakuhin.jp/js/upload.html#UPLOAD_01
http://service.cresco.co.jp/blog/entry/710

投稿2016/04/22 21:47

Qoo

総合スコア1249

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

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

k499778

2016/04/24 12:14

回答ありがとうございます! ファイルアップロードの基本的な考え方を知ることができました。 ちなみになのですが、2つ目のリンクにFileAPIを利用してサムネイルを表示する方法が載っているのですが、これも非推奨なのでしょうか? 私がやりたいのはまさにこれなのでhtmlとjsだけでできるこのやり方は魅力的なのですが。
guest

0

画像ファイルをjson化して、受け渡しすれば出来るんじゃないですか?

それかajaxで受け渡し。

投稿2016/04/23 11:55

KatsukiSugiura

総合スコア335

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問