画像アップロードプレビュー関数は、主に画像アップロード前の効果をプレビューするために使用されます。現在、主流のメソッドには主に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>