input type="file"的限制

<input type="file" id="file" />这样的标签如何能做到 如图的效果？？
谢谢
限制只能选择某些文件

解决方案 »

  1.   


    <script> 
    function openfile() 
    { 
    try{ 
        var fd = new ActiveXObject("MSComDlg.CommonDialog"); 
        fd.Filter = "图像文件 (*.jpg;*.jpeg;*.gif)|*.jpg;*.jpeg;*.gif"; 
        fd.FilterIndex = 2; 
        fd.MaxFileSize = 128; 
        fd.ShowOpen(); 
        document.getElementById("txtFileName").value = fd.Filename; 
        document.getElementById("textImage").src =fd.FileName; 
        }
    catch(e){alert("你的浏览器不支持ActiveX！\r\n请启用ActiveX后重试．");
    document.getElementById("txtFileName").value = "";} 
    }</script> 
    <input type="text" id="txtFileName" size="50" readonly="readonly" /> <input type="button" onclick="openfile();" value="Browse..." /> 
    <img id="textImage" alt=""/>
      

  2.   

    IE8  和 FF 都不行噢
      

  3.   


    function limitImg(){  
        var img=document.getElementById(arguments[0]);//显示图片的对象  
        var maxSize=arguments[1];//  
        var allowGIF=arguments[2]||false;  
        var maxWidth=arguments[3]||0;  
        var maxHeight=arguments[4]||0;  
        var postfix=getPostfix(img.src);  
        var str=".jpg";  
        if(allowGIF){str+=".gif"}  
        if(str.indexOf(postfix.toLowerCase())==-1){  
            if(allowGIF){return "图片格式不对，只能上传jpg或gif图像";}else{return "图片格式不对，只能上传jpg图像";}  
        }else if(img.fileSize>maxSize*1024){  
            return "图片大小超过限制,请限制在"+maxSize+"K以内";  
        }else{  
            if(img.fileSize==-1){  
                return "图片格式错误，可能是已经损坏或者更改扩展名导致，请重新选择一张图片";  
            }else{  
                if(maxWidth>0){  
                    if(img.width>maxWidth){  
                        return "图片宽度超过限制，请保持在"+maxWidth+"像素内";  
                    }else{  
                        if(img.height>maxHeight){  
                            return "图片高度超过限制，请保持在"+maxHeight+"像素内";  
                        }else{  
                            return "";  
                        }  
                    }  
                }else{  
                    return "";  
                }  
            }  
        }  
    }  
    //根据路径获取文件扩展名  
    function getPostfix(path){  
        return path.substring(path.lastIndexOf("."),path.length);  
    }  <body>  
    <input type="file" onchange="document.getElementById('img1').src=this.value;"  />  
    <img id="img1" />  
    <input type="button" onclick="aa()" value="上传"  />  
    </body>  
    <script type="text/javascript">
    function aa(){  
        if(limitImg('img1',100,false,1000,100)==""){  
            alert("图片上传成功");  
        }else{  
            alert(limitImg('img1',100,false,1000,100));  
        }  
    }  
    <script>