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{ $('both_form').action="file!upload.action"; $('both_form').submit(); $('insert_img').sethtml('<img src="http://images.anjiwu.com/images/loading.gif"/>'); $('display_div').setstyle('display', 'block'); $('upload_div').setstyle('display', 'none'); } }图片类型与大小的验证
//实例二 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; } } }图片预览
//实例三 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.3ppt.com imgup.select(); document.selection.clear(); } else { //显示图片 document.getelementbyid("sig_preview" index).innerhtml = "<imgsrc='" imgpath "' border=0 width=200 height=150><imgsrc='images/u51.png' width='16' height='14' οnclick='delimage(" index ");' />"; } if (index >=3){ var cnt = index 1; $("img" cnt).style.display = ""; } }
更多专业前端知识，请上 【猿2048】www.mk2048.com