画像アップロードプレビュー関数は、主に画像アップロード前の効果をプレビューするために使用されます。現在、主流のメソッドには主にJS、JQuery、およびFlashの実装が含まれていますが、通常、JSを使用して画像アップロードプレビュー関数を実装しています。以下の例を見てみましょう。
原理：
2つのステップに分かれています。画像のアップロードの入力がトリガーされ、ローカル画像が選択された場合、アップロードするオブジェクトのURL（オブジェクトURL）。オブジェクトURLを、事前に作成したIMGタグのSRC属性に割り当てて、画像を表示します。
ここでは、JavaScriptのファイルオブジェクト、Blobオブジェクト、window.url.createobjecturl（）メソッドを理解する必要があります。
ファイルオブジェクト：
ファイルオブジェクトは、ファイルに関する情報を取得するために使用でき、ファイルのコンテンツを読み取るためにも使用できます。一般に、ファイルオブジェクトは、入力要素上のファイルを選択した後にユーザーが返したFilListオブジェクトからのものであるか、無料のドラッグアンドドロップ操作によって生成されるDatAtransferオブジェクトになる可能性があります。
ファイルリストのオブジェクトを取得することを見てみましょう。
コードコピーは次のとおりです。
<script type = "text/javascript" src = "jquery.js"> </scrip>
<入力id = "upload" type = "file">
<img id = "preview" src = "">
<script type = "text/javascript">
$（ '＃upload'）。change（function（）{
//フィルリストの最初の要素を取得します
alert（document.getElementById（ 'upload'）。ファイル[0]）;
}）;
</script>
BLOBオブジェクト：
BLOBオブジェクトは、読み取り専用生データを含むファイルのようなオブジェクトです。 BLOBオブジェクトのデータは、必ずしもJavaScriptのネイティブフォームである必要はありません。ファイルインターフェイスはBLOBに基づいており、BLOBの機能を継承し、ユーザーのコンピューター上のローカルファイルをサポートするために拡張されます。
ファイルインターフェイスがBLOBを継承するため、取得したいオブジェクトURLは実際にはBLOBオブジェクトから取得されます。 BLOBオブジェクトのURLへの変換は次のとおりです。
コードコピーは次のとおりです。
<script type = "text/javascript">
var f = document.getElementById（ 'upload'）。ファイル[0];
var src = window.url.createobjecturl（f）;
document.getElementById（ 'preview'）。src = src;
</script>
互換性：
上記の方法は、Chromeブラウザに適しています
IEブラウザの場合、SRCの代わりに入力値を直接使用できます
オンラインで情報を表示するときは、ファイルオブジェクトのgetasdataurl（）メソッドを使用してURLを取得できます。現在、この方法は廃止されています。同様に、getastext（）およびgetAsbinary（）メソッドがあります。そのような例を見てみましょう。
コードコピーは次のとおりです。
関数getfullpath（obj）{//画像へのフルパスを取得します
if（obj）{
// IE
if（window.navigator.useragent.indexof（ "msie"）> = 1）{
obj.select（）;
document.selection.createrange（）。テキストを返します。
}
// firefox
else if（window.navigator.useragent.indexof（ "firefox"）> = 1）{
if（obj.files）{
obj.files.item（0）.getasdataurl（）を返します。
}
obj.valueを返します。
}
obj.valueを返します。
}
}
このコードは、クライアントイメージを取得するための完全なパスです
そのサイズと形式を制限します
コードコピーは次のとおりです。
$（ "＃loadfile"）。change（function（）{
var strsrc = $（ "＃loadfile"）。val（）;
img = new Image（）;
img.src = getfullpath（strsrc）;
//アップロードファイル形式が正しいことを確認します
var pos = strsrc.lastindexof（ "。"）;
var lastname = strsrc.substring（pos、strsrc.length）
if（lastname.tolowercase（）！= ".jpg"）{
alert（ "アップロードするファイルタイプは" + lastName + "、画像はjpgタイプの必要があります"）;
falseを返します。
}
//アップロードされたファイルのアスペクト比を確認します
if（img.height / img.width> 1.5 || img.height / img.width <1.25）{
アラート（「アップロードする画像の割合は範囲を超えており、アスペクト比は1.25-1.5の間である必要があります））;
戻る;
}
//アップロードされたファイルが特大であるかどうかを確認します
if（img.filesize / 1024> 150）{
alert（ "アップロードするファイルサイズは150k制限を超えています！"）;
falseを返します。
}
その中で、LoadFileはHTML入力ファイルのIDです。変更イベントの後、アップロードするファイルを選択した後、画像を画像ボックスに表示しますか？上記のコードの最後に次のコードを追加します
コードコピーは次のとおりです。
$（ "＃stallic"）。attr（ "src"、getfullpath（this））;
jqueryが使用されているので、jqueryで書かれたコード例を共有しましょう。
コードコピーは次のとおりです。
<html xmlns = "http://www.w3.org/1999/xhtml">
<head id = "head1">
<Meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<script type = "text/javascript" src = "jquery.js"> </scrip>
<スクリプト言語= "javascript">
$（function（）{
var ei = $（ "＃large"）;
ei.hide（）;
$（ "＃img1"）。mousemove（function（e）{
ei.css（{top：e.pagey、left：e.pagex}）。html（ '<img style = "border：1px solid gray;" src = "' + this.src + '" />'）。show（）;
}）。mouseout（function（）{
ei.hide（ "slow"）;
}）
$（ "＃f1"）。change（function（）{
$（ "＃img1"）.attr（ "src"、 "file：///"+$（ "＃f1"）.val（））;
}）
}）;
</script>
<style type = "text/css">
#large {position：absolute; display：none; z-index：999;}
</style>
</head>
<body>
<form name = "form1" id = "form1">
<div id = "demo">
<入力id = "f1" name = "f1" type = "file" />
<img id = "img1">
</div>
<div id = "large"> </div>
</form>
</body>
</html>