ホームページ > ウェブフロントエンド > jsチュートリアル > アップロードされた画像のプレビューを実装する js メソッド_javascript スキル

アップロードされた画像のプレビューを実装する js メソッド_javascript スキル

WBOY
リリース: 2016-05-16 16:14:58
オリジナル
1133 人が閲覧しました

この記事の例では、js を使用してアップロードされた画像のプレビューを実装する方法を説明します。皆さんの参考に共有してください。具体的な実装方法は以下の通りです。

コードをコピー コードは次のとおりです:
function PreviewImage(imgFile)
{
var filextension=imgFile.value.substring(imgFile.value.lastIndexOf("."),imgFile.value.length);
Filextension=filextension.toLowerCase();
if ((filextension!='.jpg')&&(filextension!='.gif')&&(filextension!='.jpeg')&&(filextension!='.png')&&(filextension!='.bmp' ))
{
alert("申し訳ありませんが、システムは標準形式の写真のみをサポートしています。形式を調整して再アップロードしてください、ありがとうございます!");
imgFile.focus();
}
それ以外
{
var パス;

if(document.all)//IE
{
imgFile.select();
パス = document.selection.createRange().text;

Document.getElementById("imgPreview").innerHTML="";
document.getElementById("imgPreview").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src="" path "")";//フィルター効果を使用する
}
他//FF
{
パス = imgFile.files[0].getAsDataURL();
Document.getElementById("imgPreview").innerHTML = "";
// document.getElementById("img1").src = パス;
}
}
}

電話:

コードをコピー コードは次のとおりです:
画像をアップロード:


操作効果は以下の通りです:

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート