ホームページ > ウェブフロントエンド > jsチュートリアル > アップロードされた画像、画像サイズの検証、jquery_jquery に基づく画像プレビュー効果コード

アップロードされた画像、画像サイズの検証、jquery_jquery に基づく画像プレビュー効果コード

WBOY
リリース: 2016-05-16 18:07:51
オリジナル
1188 人が閲覧しました

jquery は、アップロードされた画像と画像サイズの検証、画像プレビュー効果コードを実装します
アップロードされた画像の検証

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

*/
function submit_upload_picture(){
var file = $('file_c').value;
if(!/.( gif|jpg |jpeg|png|gif|jpg|png)$/.test(file)){
alert("画像の種類は .gif、jpeg、jpg、png のいずれかである必要があります")
} else{
$('両方のフォーム').action="file!upload.action";
$('両方のフォーム').sethtml('< ;img src="http://images.anjiwu.com/images/loading.gif"/>');
$('display_div').setstyle('display', 'block'); >$ ('upload_div').setstyle('display', 'none');
}
}


画像の種類とサイズの検証

//例 2
function validate_edit_logo(a ){
var file = $('file').value;
if(!/.(gif|jpg|jpeg|png|gif|jpg|png)$/.test(file)){
alert(" 画像タイプは .gif、jpeg、jpg、png のいずれかである必要があります")
if(a==1){
return false
}
}else{
var image = new image();
var height = image.height;
var filesize = image.filesize; 🎜>$( 'beforeend').src=file;
$('div_regi_right').setstyle('display', 'block');
if(幅>80 && 高さ>80 && ファイルサイズ>102400 ){
alert('80*80 ピクセルまたは 100k 未満の画像をアップロードしてください');
if(a==1){
return false;
}
if(a ==1){
return
}
}
}



画像プレビュー



コードをコピーします
コードは次のとおりです: //例 3function viewimg(index) { var name = 'uploadimg' インデックス; var imgup = $(name);
var local = imgup.value;
var point = local. lastindexof(".");
//アップロードされたファイルのサイズを決定します
var img = document.createelement("img");
img.src = local; .filesize;
img.onload = function (){filesize=this.filesize;}
if(img.filesize>5242880){
alert("画像ファイルが大きすぎます! ");
return false;
}
//画像形式かどうかを判定します
var imgname = imgup.value.substring(imgup.value.lastindexof("."), imgup.値.長さ);
imgname = imgname.to lowercase();
if ((imgname != ".gif") && (imgname != ".jpeg") && ( imgname != ".png") && (imgname != ".bmp")) {
alert("u8bf7u9009u62e9u56feu7247u6587u4ef6uff0cu8c22u8c22!");
imgup.focus();ファイル内 www.3ppt.com
imgup.select();
document.selection.clear();
} else {
//画像を表示
document.getelementbyid("sig_preview") Index) .innerhtml = "";
}
if (index >=3){
var cnt = Index 1;
$("img" cnt)。スタイル.display = "";
}
}

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