读书人

求js验证上传图片格式大小代码tha

发布时间: 2012-04-18 15:01:59 作者: rapoo

求js验证上传图片格式,大小代码,thank you ...
求js验证上传图片格式,大小代码,因一时没找到合适的,谢谢

[解决办法]
参考:
http://topic.csdn.net/u/20081223/15/1d82abd4-535d-4bd5-8574-5aa1776e04ee.html

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.html
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> 


[解决办法]
<SCRIPT LANGUAGE="JavaScript">
<!--
function CheckFileSize()
{
var limit = document.getElementById("fileSizeLimit").value * 1024;
var width = document.getElementById("widthLimit").value;
var height = document.getElementById("heightLimit").value;

if (oFileChecker.fileSize > limit)
{
alert("文件大小:"+oFileChecker.fileSize+"字节 too large!");
}
else
{
alert("文件大小:"+oFileChecker.fileSize+"字节ok");
}

if( oFileChecker.height> height){
alert("文件高度:"+oFileChecker.height+" too height!");
}
else
{
alert("文件高度:"+oFileChecker.height+"ok");
}
if( oFileChecker.width> width){
alert("文件宽度:"+oFileChecker.width+" too height!");
}
else
{
alert("文件宽度:"+oFileChecker.width+"ok");
}
return false;
}
var right_type=new Array(".gif",".jpg",".jpeg",".png",".bmp");

var oFileChecker = document.getElementById("fileChecker");

function changeSrc(filePicker)
{
if(!checkImgType(filePicker.value))
{
alert("文件格式不正确!");
return;
}
oFileChecker.src = filePicker.value;
}

oFileChecker.onreadystatechange = function ()
{
if (oFileChecker.readyState == "complete")
{
CheckFileSize();
}
}

/**
判断上传文件格式是否正确
*/
function checkImgType(fileURL)
{
//本程序用来验证后缀,如果还有其它格式,可以添加在right_type;
var right_typeLen=right_type.length;
var imgUrl=fileURL.toLowerCase();
var postfixLen=imgUrl.length;
var len4=imgUrl.substring(postfixLen-4,postfixLen);
var len5=imgUrl.substring(postfixLen-5,postfixLen);
for (i=0;i<right_typeLen;i++)
{
if((len4==right_type[i])||(len5==right_type[i]))
{
return true;
}
}
}

//--></SCRIPT>
[解决办法]
在网上很好找的。
[解决办法]
js
貌似不能获取文件大小

涉及到了一个权限问题

我以前做过一次

后来改用flash就解决了,,,





手机代工网,最新的供应信息,采购信息,手机行业资讯。。
[解决办法]
js只能判断长宽?
[解决办法]
不知道怎么取文件大小?
up

[解决办法]
<input type="file" runat="server" style="height:22px; width:220px;" onchange="PhotoType();" id="fUpLoad" />
<input type="hidden" id="HFurl" runat="server" />
<asp:ImageButton style="cursor:pointer" ID="iUpLoad" runat="server" ImageUrl="上传图片" onclick="iUpLoad_Click"/>

function PhotoType() {
var x = $("<%=fUpLoad.ClientID %>");
if (!x || !x.value) return;
var patn = /\.jpg$|\.jpeg$|\.gif$/i;
if (patn.test(x.value)) {//如果已经选择了并且类型是图片则浏览不可用
$("<%=iUpLoad.ClientID%>").disabled = false;
}
else {
alert('允许上传图片格式:GIF|JPG|JPEG|。');
$("<%=iAddPhoto.ClientID%>").disabled = false;
}
if (x.value == "" & x.value == null) { alert('请选择要上传的图片。'); }
}

------解决方案--------------------


大小在

C# code
/// <summary>        /// 上传图片并显示出来/并保存到隐藏域路径.以待点击预览图片查看图片        protected void iUpLoad_Click(object sender, ImageClickEventArgs e)        {            string test = Server.MapPath("~/CaseImages");  //用来生成文件夹            if (!Directory.Exists(test))            {                Directory.CreateDirectory(test);            }            int filesize = 4096;            if (fUpLoad.PostedFile.FileName != "")            {                if (fUpLoad.PostedFile.ContentLength / 1024 > filesize)                {                    RegisterStartupScript("Startup", "<script>alert('单张图片不能超过4M,请重新选择图片。');</script>");                }                else                {                    string imgname = fUpLoad.PostedFile.FileName;                    string imgType = imgname.Substring(imgname.LastIndexOf(".") + 1);                    string quanname = Guid.NewGuid() + "." + imgType;                    string imgurl = "~/CaseImages/" + quanname;                    fUpLoad.PostedFile.SaveAs(Server.MapPath(imgurl));                    this.HFurl.Value = "../../CaseImages" + "/" + quanname;                }            } 

读书人网 >asp.net

热点推荐