自知其无知
不懂，慢慢懂。
posts - 2,comments - 2,trackbacks - 0
最常用，而且代码最精简的 js 客户端限制图片类型以及图片大小
<!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>无标题文档</title>
</head>

<body>
<script type="text/javascript">
var imgSize = 1024 * 100; //最大100K
function checkImgSize(){
    var file = document.getElementById("img");
    if(file.value != ""){
        
        //检测类型
        var val = file.value;
        if(/^.*?\.(gif|png|jpg|jpeg|bmp)$/.test(val)){
        }else{
            alert("只能上传gif, png, jpg, bmp格式的图片");
            return false;
        }
        
        var img = new Image();
        img.onreadystatechange = function(){
            if(img.readyState == "complete"){
                if(img.fileSize <=0 || img.fileSize > imgSize){
                    alert("当前文件大小" + img.fileSize / 1024 + "KB, 超出最大限制 " + imgSize / 1024 + "KB");
                }else{
                    alert("OK");
                    return true;
                }
            }
        }
        
        img.src = val;
    }else{
        alert("请选择上传的文件!");
        return false;
    }
}
</script>
<input type="file" id="img" />
<input type="submit" value="上传" onclick="return checkImgSize()" />
</body>
</html>



==========================
这是另一个，思路一样，只不过绑定事件是通过 attach 上去的;

判断上传图片大小:
-------------------------
<input       id=inp       type= "file ">      
    <button       onclick= "ys() "> Test </button>      
    <script>      
    var       img=null;      
    function       ys()      
    {      
    if(img)img.removeNode(true);      
    img=document.createElement( "img ");      
    img.style.position= "absolute ";      
    img.style.visibility= "hidden ";      
    img.attachEvent( "onreadystatechange ",orsc);      
    img.attachEvent( "onerror ",oe);      
    document.body.insertAdjacentElement( "beforeend ",img);      
    img.src=inp.value;      
    }      
    function       oe()      
    {      
    alert( "cant       load       img ");      
    }      
    function       orsc()      
    {      
    if(img.readyState!= "complete ")return       false;      
    alert( "图片大小： "+img.offsetWidth+ "X "+img.offsetHeight);      
    alert( "图片尺寸： "+img.fileSize);      
    }      
    </script>
-----------------------------
不过这代码的缺点是还使用插件,所以如果把他防在web里面，是不好用的。文件大小一般还是在服务器端来检测的.
*****************************
下面的程序是控制图片显示大小，可以把图片等比例缩放:
-----------------------------
<script   type= "text/javascript ">
//     让图片成比例缩小

function   changeImage(ImgD){
var   image=new   Image();  
image.src=ImgD.src;  

if(image.width> 185){
ImgD.width=185;
ImgD.height=(185*image.height)/image.width;
image.width=ImgD.width;
image.height=ImgD.height;
}

if(image.height> 169){
ImgD.height=169;
ImgD.width=(169*image.width)/image.height;
image.height   =   ImgD.height;
image.width   =   ImgD.width;
}

ImgD.alt   =   image.width   +   "× "   +   image.height;
}
</script>
<img   src= " "   width= "10 "   height= "70 "   onload= "changeImage(this) "/>
------------------------------
这个程序需要主义的是，在加载大图片的时候,要给图片加载留够充足的时间否则,会出现错误的.


===============================================
文件上传之前的检测，通常是通过文件名来判断文件类型是否合法，但是要想检测文件的大小很难办到，除非在本地或者使用控件。不过在IE下img有几个附加的属性，如：fileCreatedDate、fileModifiedDate、fileSize、fileUpdatedDate、filters，我们可以通过这些属性来获取图片文件的部分信息，如文件大小，我们用file表单同img标签结合，就能够在上传之前判断图片文件的大小是否合法了。

还有一个小小的发现就是，IE下动画的onload事件是在每次循环开始都触发，这样我们可以通过他来达到和js里setInterval()函数一样的效果，如：



这两个例子的源代码如下:
第一个：

限制：
html
Java代码 复制代码
  1. <input type="text" size="4" value="10" name="fileSizeLimit" id="fileSizeLimit"/> K   
  2. <input type="file" name="file1" id="file1" size="40" onchange="changeSrc(this)"/>   
  3. <img src="about:blank" id="fileChecker" alt="test"  height="18"/>  


js
Java代码 复制代码
  1. <script type="text/javascript">   
  2. var oFileChecker = document.getElementById("fileChecker");   
  3.        
  4. function changeSrc(filePicker)   
  5. {   
  6.     oFileChecker.src = filePicker.value;   
  7. }   
  8.        
  9. oFileChecker.onreadystatechange = function ()   
  10. {   
  11.     if (oFileChecker.readyState == "complete")   
  12.     {   
  13.         checkSize();   
  14.     }   
  15. }   
  16.        
  17. function checkSize()   
  18. {   
  19.     var limit  = document.getElementById("fileSizeLimit").value * 1024;   
  20.        
  21.     if (oFileChecker.fileSize > limit)   
  22.     {   
  23.         alert("too large");   
  24.     }   
  25.     else  
  26.     {   
  27.         alert("ok");   
  28.     }   
  29. }   
  30. </script>    


第二个：


Java代码 复制代码
  1. <img src="monkey.gif" id="monkey" alt="monkey" /> loops: <span id="loopsNum"></span>   
  2.        
  3. <script type="text/javascript">   
  4. var loops = 0;   
  5. document.getElementById("monkey").onload = function ()   
  6. {   
  7.     document.getElementById("loopsNum").innerText= loops;   
  8.     loops ++;   
  9. }   
  10. </script>    



每三个:

Java代码 复制代码
  1. <script>   
  2. function checkSize(imgObj)   
  3. {   
  4. alert(imgObj.fileSize);   
  5. }   
  6.   
  7. </script>   
  8. <BODY>   
  9. <form id="aform">   
  10. <img id=im onload="checkSize(this)" src="http://www.google.com/logos/winter_holiday05_5res.gif">   
  11. </form>   
  12. </BODY>  



限制文件类型

Java代码 复制代码
  1. function CheckFile(){   
  2.   with(document.aform){   
  3.   var filepath1 =SourceFile1.value;   
  4.   var fileextend1 = filepath1.substring(filepath1.lastIndexOf('.')+1,filepath1.length);   
  5.   if(fileextend1==""){   
  6.     alert("对不起，你必须选择一个文件！");   
  7.     return false;   
  8.   }   
  9.   fileextend1 = fileextend1.toLowerCase();   
  10.   if(fileextend1 != "xls" && fileextend1 !="txt"){   
  11.     alert("对不起，您选择的文件格式不对，请选择文本文件(txt)或Excel文件。");   
  12.     return false;   
  13.   }   
  14.   if(fileextend1 == "xls"){   
  15.     if(!confirm("上传EXCEL文件速度将会很慢，我们推荐您使用文本格式。你确定要使用这个文件吗？")){   
  16.       return false;   
  17.       }   
  18.     }  
posted on 2008-12-12 00:15 CopyHoo 阅读(1116) 评论(0)  编辑  收藏

只有注册用户登录后才能发表评论。
网站导航:
 
Copyright ©2024 CopyHoo Powered By博客园 模板提供：沪江博客