コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > js画像プレビュー機能を簡単実装_javascriptスキル

js画像プレビュー機能を簡単実装_javascriptスキル

WBOY
リリース： 2016-05-16 15:19:27
オリジナル
1162 人が閲覧しました

この記事の例は、以前に作成した画像プレビューの実装方法を説明したもので、コードは比較的簡単なので、参考までに共有したいと思います。詳細は以下の通りです。

1. エフェクトのプレビュー

レンダリング:

2. 実装コード: 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js图片预览功能</title>
<script language=javascript>
function previewFile() {
 var preview = document.querySelector('img');
 var file  = document.querySelector('input[type=file]').files[0];
 var reader = new FileReader();
 reader.onloadend = function () {
  preview.src = reader.result;
 }
 if (file) {
  reader.readAsDataURL(file);
 } else {
  preview.src = "";
 }
}
</script>
</head>
<body>
<input type="file" onchange="previewFile()"><br>
<img src="" height="200" width="300" alt="Image preview..."/>
</body>
</html>
ログイン後にコピー

この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。

関連ラベル：
js图片预览 js预览
ソース：php.cn
前の記事：jQuery はマルチレベル リンケージ ドロップダウン リスト クエリを実装します box_jquery 次の記事：メッセージプロンプトのエフェクトを実装するための notie.js プラグインに基づく純粋な JavaScript _javascript スキル
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
JavaScript が期待どおりに実行されない htmlcssjs をレスポンシブにしようとしていますが、期待どおりに動作しません。最小化するとすでにレスポンシブになりますが、onclick では動作しません。ナビゲーションとナ...
から 2024-04-04 13:05:32
0
1
306
サーバーは複数の画像を <picture> タグに送信してフォールバックしますか? このように実装されたイメージタグに興味があります。 <picture><sourcesrcset="path/img.webp"type=&q...
から 2024-04-03 09:05:59
0
1
290
HTML CSS を使用してメニューに追加された画像を中央に配置するにはどうすればよいですか? 下の写真のようなメニューを作成しようとしています。その方法は次のとおりです。メニュー内の項目を写真の中央に配置するにはどうすればよいですか?これは私の宿題で、一生懸命努力しています...
から 2024-04-01 20:53:26
0
2
264
ユーザーがあるページで画像をアップロードまたは変更し、別のページに表示できるようにするにはどうすればよいですか? ユーザーがあるページに写真をアップロードして、別のページに表示できるようにするにはどうすればよいですか?ユーザーは画像を変更でき、他のページでも同様に変更されます。また、php/j...
から 2024-04-01 18:33:31
0
1
332
配列 JS 内の 52 枚の画像 私は IT Assistant 1 年を勉強しており、現在 JavaScriptHTML と CSS を使用してカード ゲームを作成する必要があります。私の質問は、52 枚のカード...
から 2024-03-30 21:14:49
0
1
272
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート