ローカル画像プレビュー (IE6/IE7/IE8/Firefox3 をサポート) エクスペリエンスの概要_JavaScript スキル

最近、Webプロジェクトの開発中にローカル画像プレビューの必要性に遭遇しましたが、他の理由で最終的には使用できませんでしたが、それでもある程度理解して整理しました。

ここでは、Opera、Safari、Chrome を除いて、主に IE6、IE7/8、Firefox3 を含むブラウザ別に分けています。これら 3 つは基本的に需要が非常に少ないため、研究されていません。

要約すると、:
IE6 では、file の値から直接画像パスを取得してプレビューを表示できます。
IE7 および IE8 では、select を通じてファイルの画像パスを取得し、フィルターを使用してプレビューを表示します。
FireFox でファイルの getAsDataURL メソッドを呼び出し、プレビューを表示するための Data URI データを取得します。

以下は完全なデモです:

コードをコピーします コードは次のとおりです:

javascript">
function setImg(obj){
if( !obj.value.match( /.jpg|.gif|.png|.bmp/i ) ){
alert('画像形式が無効です!');
return false;
$("#preview_fake").empty();
var img = document.createElement("img"); img.setAttribute("src", "" );
img.setAttribute("id", "preview");
document.getElementById("preview_fake").appendChild(img); $.browser.msie){
if($.browser.version == 6.0){
$("#preview").attr("src",obj.value);
}
var objPreview = document.getElementById( 'preview' );
var objPreviewFake = document.getElementById('preview_fake' );
var objPreviewSizeFake = document.getElementById('preview_size_fake' ); select();
var imgSrc = document.selection.createRange().text;
objPreviewFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src=
objPreviewSizeFake.filters.item ('DXImageTransform.Microsoft.AlphaImageLoader');
autoSizePreview(objPreviewFake,objPreviewSizeFake.offsetWidth,objPreview.style.display ='none'); }
if($.browser.mozilla){
$("#preview").attr("src",obj.files[0].getAsDataURL());
} ($.browser.opera){
alert("Opera ブラウザは当面サポートされていません");
}
if($.browser.safari){
alert("Safari ブラウザは当面サポートされていません");
}
}