jquery验证上传图片与图片大小/图片预览效果

发布时间:2019-12-21编辑:脚本学堂
本文介绍了jquery实现上传图片与图片大小的验证方法,以及图片预览效果功能,需要的朋友参考下。

例子,jquery实现上传图片及图片大小验证、图片预览效果代码。
1.上传图片验证
 

复制代码 代码示例:
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{  
$('both_form').action="file!upload.action";  
$('both_form').submit();  
$('insert_img').sethtml('<img src="/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();  
image.src = file;  
var height = image.height;  
var width = image.width;  
var filesize = image.filesize;  
$('beforeend').src=file;  
$('div_regi_right').setstyle('display', 'block');  
if(width>80 && height>80 && filesize>102400){  
alert('请上传80*80像素 或者大小小于100k的图片');  
if(a==1){  
return false;  
}  
}  
if(a==1){  
return true;  
}  
}  
}  

3.图片预览
 

复制代码 代码示例:
//实例三  
function viewimg(index) {  
var name = 'uploadimg' + index;  
var imgup = $(name);  
var imgpath = getpath(imgup);  
var local = imgup.value;  
var point = local.lastindexof(".");  
//判断上传文件大小  
var img = document.createelement("img");  
img.src = local;  
var filesize = img.filesize;  
img.onload = function(){filesize=this.filesize;}  
if(img.filesize>5242880){  
alert("图片文件过大!");  
return false;  
}  
//判断是否是图片格式  
var imgname = imgup.value.substring(imgup.value.lastindexof("."), imgup.value.length);  
imgname = imgname.tolowercase();  
if ((imgname != ".jpg") && (imgname != ".gif") && (imgname != ".jpeg") && (imgname != ".png") && (imgname != ".bmp")) {  
alert("u8bf7u9009u62e9u56feu7247u6587u4ef6uff0cu8c22u8c22!");  
imgup.focus();  
//清空file中的值www.yuju100.com  
imgup.select();  
document.selection.clear();  
} else {  
//显示图片  
document.getelementbyid("sig_preview"+index).innerhtml = "<img src='" + imgpath + "' border=0 width=200 height=150><img src='images/u51.png' width='16' height='14' onclick='delimage(" + index + ");' />";  
}  
if (index >=3){  
var cnt = index + 1;  
$("img" + cnt).style.display = "";  
}  
}