JS 客户端验证文件类型,获取图片信息

it2022-05-05  110

<!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" οnchange="ShowInfo(this.value);" /></p><p id="Info"></p><p><img src="#" id="imgs" width="300" height="300"  onmousewheel="return zoomimg(this)" οnlοad="DrawImage(this,300,300)" /></p></form></body></html>

转载于:https://www.cnblogs.com/binaryworms/archive/2010/03/31/1701586.html


最新回复(0)