求js验证上传图片格式,大小代码,因一时没找到合适的,谢谢
------解决方案--------------------------------------------------------
参考:
http://topic.csdn.net/u/20081223/15/1d82abd4-535d-4bd5-8574-5aa1776e04ee
js:
- HTML code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Articles_Default2" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>无标题页</title> <script type="text/javascript" language="javascript"> function CheckFileType() { var objButton=document.getElementById("Button1");//上传按钮 var objFileUpload=document.getElementById('FileUpload1');//FileUpload var objMSG=document.getElementById('msg');//显示提示信息用的DIV var FileName=new String(objFileUpload.value);//文件名 var extension=new String (FileName.substring(FileName.lastIndexOf(".")+1,FileName.length));//文件扩展名 if(extension=="jpg"||extension=="JPG")//你可以添加扩展名 { objButton.disabled=false;//启用上传按钮 objMSG.innerHTML=""; } else { objButton.disabled=true;//禁用上传按钮 objMSG.innerHTML="请选择正确的文件文件"; } } </script></head><body> <form id="form1" runat="server"> <div> <div id="msg"></div> <asp:Button ID="Button1" runat="server" Text="上传" Enabled="False" /> <br /> <asp:FileUpload ID="FileUpload1" runat="server" onChange="javascript:CheckFileType();" /> </div> </form></body></html>
------解决方案--------------------------------------------------------
大小用JS好像不太好验证吧?只有到后台去验证。
还有,前台验证过之后,到后台也要验证下。
------解决方案--------------------------------------------------------
刚刚找了一个客户端代码,我没验证,你看看行不?
参考:http://www.cnblogs.com/nina-piaoye/archive/2007/10/19/930741
JS 客户端验证文件类型,获取图片信息:
- HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>JS 文件大小及类型判断</title><style>*{}{ font-size:12px;}</style><script language="javascript"><!--function ShowInfo(sUrl){ var FSO,F,Ext; var Extlist = ".gif.jpg.bmp"; //FSO = new ActiveXObject("Scripting.FileSystemObject"); //F = FSO.GetFile(sUrl); Ext = GetExt(sUrl); if(Extlist.indexOf(Ext)==-1) document.getElementById("Info").innerHTML = "扩展名:" + Ext + " 不是图片类型! 原始路径:" + sUrl; else{ document.getElementById("imgs").src = ""; document.getElementById("imgs").alt = "图片加载中……"; document.getElementById("imgs").src = sUrl; var MyImage = new Image(); MyImage.src = sUrl; document.getElementById("Info").innerHTML = "扩展名:" + Ext + " 合法图片类型! 原始路径:" + sUrl + "<br /> 文件大小:" + MyImage.fileSize + " Bytes 尺寸:" + MyImage.width + "*" + MyImage.height; }}function GetExt(sUrl){ var arrList = sUrl.split("."); return arrList[arrList.length-1];}function DrawImage(ImgD,w,h){ var flag = false; var MyImage = new Image(); MyImage.src = ImgD.src; if(MyImage.readyState != "complete"){ return false; //确保图片完全加载 } if(MyImage.width > 0 && MyImage.height > 0){ flag = true; if(MyImage.width / MyImage.height >= w / h){ if(MyImage.width > w){ ImgD.width = w; ImgD.height = (MyImage.height * w) / MyImage.width; }else{ ImgD.width = MyImage.width; ImgD.height = MyImage.height; } ImgD.alt = "原始尺寸:" + MyImage.width + "x" + MyImage.height; }else{ if(MyImage.height > h){ ImgD.height = h; ImgD.width = (MyImage.width * h) / MyImage.height; }else{ ImgD.width = MyImage.width; ImgD.height = MyImage.height; } ImgD.alt = "原始尺寸:" + MyImage.width + "x" + MyImage.height; } }}function zoomimg(img){ var zoom=parseInt(img.style.zoom,10) || 100; zoom += event.wheelDelta / 24; imgW = img.clientWidth*zoom/100; if (zoom>10) img.style.zoom = zoom + "%"; return false;}--></script></head><body><form id="form1" name="form1" enctype="multipart/form-data" method="post" action=""><p> <input name="ofile" type="file" id="ofile" onchange="ShowInfo(this.value);" /></p><p id="Info"></p><p><img src="#" id="imgs" width="300" height="300" onmousewheel="return zoomimg(this)" onload="DrawImage(this,300,300)" /></p></form></body></html>