JS验证上传图片格式和大小

来源：互联网发布：电视怎么调到网络电视编辑：程序博客网时间：2024/04/29 04:18

代码上面注释很明确我就不解释了！

<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <meta name="Generator" content="EditPlus®">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <title>Document</title> </head><script>//限制上传图片大小100K var MAXSIZE = 140 * 1024; //图片大小限制信息 var ERROR_IMGSIZE = "图片大小不能超过140K"; function accp(){//显示选择图片   var imgurl= document.getElementById("fileurl").value;<pre name="code" class="javascript">var filename="";if(imgurl.indexOf(".")>0){ filename=imgurl.substring(imgurl.lastIndexOf("."),imgurl.length);}else{filename=path;}var exp = /.\.jpg|.\.gif|.\.png|.\.bmp/i;                     if(!exp.test(filename)){updateTips("图片格式错误！请重新选择图片！");            document.getElementById("img").src="";  }

   document.getElementById("img").src=imgurl;}function updateTips(str) { //提示信息   document.getElementById("errorTips").innerHTML=str;  } function sizeCheck(img) {      updateTips("");   if(img.readyState=="complete"||img.readyState=="loaded"){ //onload加载完成               if (img.fileSize > MAXSIZE) { //判断图片的大小是不是满足updateTips(ERROR_IMGSIZE);document.getElementById("img").src="";}          }else{updateTips("图片加载未完成！请重新选择图片！");document.getElementById("img").src="";   }} </script><body><font size="2" color="#663300"><strong><table><tr><td colspan="2" class="label"><font size="2" color="#ff0066"><center><span id="errorTips"> </span> </center></font></td></tr><tr><td colspan="" class="label"><center>文件上传</center></td><td class="label" align="left"><div id="d"><input type="file" id="fileurl" name="fileurl" value="" onChange="accp()" /> </div></td><tr><td colspan="2" class="label"><center><font size="1" color="red">注意文件的大小不能大于140K！文件的格式jpg，png格式</font></center></td></tr><tr><td colspan="" valign="top"  class="label"><center>图片预览</br><input type="button" value="上传图片" onclick=""></center></td><td class="label" align="left"><div id="d"><img id="img"  onload="sizeCheck(this)" class="img" height="200px" width="200px" src=""></div></td>    </tr></table></strong></font> </body></html>

0 0