画像ファイルを選択したときにプレビュー表示する方法
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
]
開始行:
**画像ファイルのプレビュー表示のコード [#c3141316]
この機能はJQueryを使って実現させます
&br;JQueryの全体のコード
$(function() {
$('#myfile').change(function(e){
//ファイルオブジェクトを取得する
var file = e.target.files[0];
var reader = new FileReader();
//画像でない場合は処理終了
if(file.type.indexOf("image") < 0){
alert("画像ファイルを指定してください。");
return false;
}
//アップロードした画像を設定する
reader.onload = (function(e){
$("#img1").attr("src", e.target.result);
})
reader.readAsDataURL(file);
});
});
HTMLのコード
<head>
<meta charset="UTF-8">
<title>マイページ</title>
<script src="http://code.jquery.com/jquery-3.2.1.min.js...
</head>
<body>
<div class = "div">
<label class = "picture">画像</label>
<input id = "myfile" class = "file" type = "file" nam...
<img id="img1" style="width:150px;height:150px;"/>
</div>
headタグの中に<script src="http://code.jquery.com/jquery-...
&br;画像はHTMLコードのimgタグに縦横幅150pxの四角が出るよ...
*上記のJQueryのコードの主要部分を解説 [#e02985d7]
**$(function() {} [#c111c79c]
$(function(){}は「HTML要素を読み込んでからJQueryを実行す...
この記述を忘れるとプログラムがうまく動作しなくなってしま...
**$('#myfile').change(function(e) [#v00c6a03]
('#myfile')はHTMLで記述されているinputタグの中に記述され...
シャープ記号に続けてid属性の値を記述することで、id属性に...
&br;
&br; .change(function(e)はinputなどの要素の中身が変更され...
&br;
&br;functionの中のeはeventの略でイベントオブジェクトのこ...
&br; イベントオブジェクトとは、発生したイベントに関する様...
** var file = e.target.files[0]; [#mfb2ebe3]
varは変数を定義するときに必要で、fileは変数名です。
&br;e.target.files[0]はHTML上でファイルを選択した時に選択...
**var reader = new FileReader(); [#fbe422cb]
FileReader()はBlob(File)オブジェクトからデータを読み込む...
**file.type.indexOf("image") < 0 [#t50d0200]
file.type.indexOf("image")はファイルを選択するときにjpeg...
**reader.onload = (function(e) [#bfc2c7f6]
readerの後ろについているonloadはFileReaderのイベントの１...
** $("#img1").attr("src", e.target.result); [#ra736ba8]
("#img1")はimgタグの中に記述されているid属性の指定。
&br;atterメソッドは、HTML要素の様々な属性の値を取得や変更...
今回の場合だと、imgタグにsrc属性を追加し、e.target.result...
** reader.readAsDataURL(file); [#of6634de]
readDataURLはFileReaderのメソッドです。readAsDataURLは画...
&br;今回の場合だとFileReaderインスタンスを作成し、readAsD...
終了行:
**画像ファイルのプレビュー表示のコード [#c3141316]
この機能はJQueryを使って実現させます
&br;JQueryの全体のコード
$(function() {
$('#myfile').change(function(e){
//ファイルオブジェクトを取得する
var file = e.target.files[0];
var reader = new FileReader();
//画像でない場合は処理終了
if(file.type.indexOf("image") < 0){
alert("画像ファイルを指定してください。");
return false;
}
//アップロードした画像を設定する
reader.onload = (function(e){
$("#img1").attr("src", e.target.result);
})
reader.readAsDataURL(file);
});
});
HTMLのコード
<head>
<meta charset="UTF-8">
<title>マイページ</title>
<script src="http://code.jquery.com/jquery-3.2.1.min.js...
</head>
<body>
<div class = "div">
<label class = "picture">画像</label>
<input id = "myfile" class = "file" type = "file" nam...
<img id="img1" style="width:150px;height:150px;"/>
</div>
headタグの中に<script src="http://code.jquery.com/jquery-...
&br;画像はHTMLコードのimgタグに縦横幅150pxの四角が出るよ...
*上記のJQueryのコードの主要部分を解説 [#e02985d7]
**$(function() {} [#c111c79c]
$(function(){}は「HTML要素を読み込んでからJQueryを実行す...
この記述を忘れるとプログラムがうまく動作しなくなってしま...
**$('#myfile').change(function(e) [#v00c6a03]
('#myfile')はHTMLで記述されているinputタグの中に記述され...
シャープ記号に続けてid属性の値を記述することで、id属性に...
&br;
&br; .change(function(e)はinputなどの要素の中身が変更され...
&br;
&br;functionの中のeはeventの略でイベントオブジェクトのこ...
&br; イベントオブジェクトとは、発生したイベントに関する様...
** var file = e.target.files[0]; [#mfb2ebe3]
varは変数を定義するときに必要で、fileは変数名です。
&br;e.target.files[0]はHTML上でファイルを選択した時に選択...
**var reader = new FileReader(); [#fbe422cb]
FileReader()はBlob(File)オブジェクトからデータを読み込む...
**file.type.indexOf("image") < 0 [#t50d0200]
file.type.indexOf("image")はファイルを選択するときにjpeg...
**reader.onload = (function(e) [#bfc2c7f6]
readerの後ろについているonloadはFileReaderのイベントの１...
** $("#img1").attr("src", e.target.result); [#ra736ba8]
("#img1")はimgタグの中に記述されているid属性の指定。
&br;atterメソッドは、HTML要素の様々な属性の値を取得や変更...
今回の場合だと、imgタグにsrc属性を追加し、e.target.result...
** reader.readAsDataURL(file); [#of6634de]
readDataURLはFileReaderのメソッドです。readAsDataURLは画...
&br;今回の場合だとFileReaderインスタンスを作成し、readAsD...
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
