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

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

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

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

HTML

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

Q&A

解決済

1回答

4679閲覧

フォームで選択した画像をJavaScriptでリアルタイムに表示

ryohasegawa

総合スコア437

JavaScript

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

HTML

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

0グッド

0クリップ

投稿2017/10/09 11:23

html

1<h1>画像選択</h1> 2 <br> 3 <div class="form-group row"> 4 <label for="inputPassword" class="col-sm-2 col-form-label">画像:</label> 5 <div class="col-sm-10"> 6 <div class="input-group mb-2 mb-sm-0"> 7 <input type="file" class="form-control-file" id="image" name="image"> 8 </div> 9 </div> 10</div> 11<hr> 12<img src="" id="image_viw">

Javascript

1function image() { 2 var image = document.getElementById("image"); 3 var image_viw = document.getElementById("image_viw"); 4 5 image.addEventListener("change", function(){ 6 console.log(image.files[0].name); 7 image_viw.src = image.files[0].name; 8 }); 9 }

上のコードを実際書きました。HTMLの方のinput で画像を選択し、選択されたら<img src="" id="image_viw">へ表示させたいです。
JavaScriptでコードを書いたのですが、ファイル名は取得できるものの、ファイルのパスが取得できません。
ファイルパスの取得をするにはどうすればよいですか?

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

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

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

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

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

guest

回答1

0

ベストアンサー

残念ながらfileタイプのinput要素から得られたFileオブジェクトにはファイルパスは含まれていません. ファイルパスが取得できてしまうとセキュリティ的に問題があるからです.

その代わりにFileオブジェクトには選択したファイルの画像データ(バイナリ)が含まれていて, この内容はURL.createObjectURLメソッドを用いてBlob URIスキーム形式の文字列に変換することが出来ます. この文字列をパス文字列の代替としてimg要素やCSSから参照します.

JavaScript

1function image() { 2 var image = document.getElementById("image"); 3 var image_viw = document.getElementById("image_viw"); 4 5 image.addEventListener("change", function(){ 6 console.log(image.files[0].name); 7 //image_viw.src = image.files[0].name; 8 //NOTE:Fileオブジェクトを開放する 9 URL.revokeObjectURL(image_viw.src); 10 //FileオブジェクトをBlob URIスキームに変換してimg要素に読み込む 11 image_viw.src = URL.createObjectURL(image.files[0]); 12 }); 13}

なお, 今回のサンプルのように何度もFileオブジェクトを読み込む場合, 不必要となったURL文字列をURL.revokeObjectURLメソッドを使って明示的に破棄する必要があります. さもないとURIスキーム形式に変換したFileオブジェクトがメモリから開放されず, メモリリークの原因となるからです.

参考:https://developer.mozilla.org/ja/docs/Web/API/URL/createObjectURL


追記:解説図を添付します
※canvasのtoBlobをinput[type=file]からFileを入手したと読み替えて下さい
※BlobとFileは同じものと考えて下さい(FileオブジェクトはBlobオブジェクトを継承しています)
※この図ではa要素のhref属性にオブジェクトURLを設定しファイルをダウンロードしようとしています

BlobURIスキーム文字列の取得と開放
このようにWEBページはBlobURIスキーム形式のオブジェクトURLのエントリリストを内包していて, このリストがBlob(File)オブジェクトを開放しない限りメモリに残ってしまうのです.
従って, 何も対処していないとWEBページの生存期間に比例してエントリリストが肥大していき, (滅多にありませんが)タブやブラウザのクラッシュに繋がります.
WEBページを頻繁にリロードしている場合はこの現象は発生せず見落としがちであることから, 「URL.createObjectURLとURL.revokeObjectURLとはセットで使う」ように心がけます.

投稿2017/10/09 12:41

編集2017/10/09 13:55
defghi1977

総合スコア4756

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

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

ryohasegawa

2017/10/09 13:00

ありがとうございます。 表示できました。 「なお, 今回のサンプルのように何度もFileオブジェクトを読み込む場合, 不必要となったURL文字列をURL.revokeObjectURLメソッドを使って明示的に破棄する必要があります. さもないとURIスキーム形式に変換したFileオブジェクトがメモリから開放されず, メモリリークの原因となるからです.」というのは、image_viw.src = URL.createObjectURL(image.files[0]);このようにしないといけないということでしょうか?
defghi1977

2017/10/09 13:17

Fileオブジェクトをimg要素に表示する上でURL.xxxメソッドを使わざるを得ないのですが, その際URL.createObjectURLメソッドはURL.revokeObjectURLメソッドと常にセットで考えます. 今回URL.createObjectURL(image.files[0])として得られたURL文字列は今image_viw.srcプロパティに格納されています. そのため, 次の画像表示時にはURL.revokeObjectURLメソッドを使ってimage_viw.srcプロパティ内のURL文字列を無効化してから内容を上書きしてやります.
ryohasegawa

2017/10/09 13:29

なるほど、分かった気がします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問