当前位置:编程学习 > JS >>

如何用JS限制上传图片的大小??

js限制上传的图片像素大小源码如下:

function Preview(obj) {

            value = getPath(obj);
            var exName = value.substr(value.lastIndexOf(".") + 1).toUpperCase();
            if (exName == "JPG" || exName == "BMP" || exName == "GIF" || exName == "PNG") {
                if (document.getElementById("FileUpload1").fileSize > 102400) {
                    document.getElementById("FileUpload1").src = "";
                    alert("预览图不得大于100KB");
                }
            }
            else {
                alert("请选择JPG、BMP、GIF、PNG格式的图片文件");                
            }
        }

        //IE或火狐浏览器
        function getPath(obj) {
            if (obj) {

                if (window.navigator.userAgent.indexOf("MSIE") >= 1) {
                    obj.select();

                    return document.selection.createRange().text;
                }

                else if (window.navigator.userAgent.indexOf("Firefox") >= 1) {
                    if (obj.files) {

                        return obj.files.item(0).getAsDataURL();
                    }
                    return obj.value;
                }
                return obj.value;
            }
        }


上传作品:

<asp:FileUpload ID="FileUpload1" Height="22px" TabIndex="12" CssClass="textBox_thick1_border" runat="server" onchange="Preview(this);" />


现在的问题是onchange事件能判断到上传的文件是否是图片JPG、BMP、GIF、PNG这四种类型,也就是function Preview(obj)这个方法的else条件能判断,if条件判断不了,

求高手指教啊,感激不尽。 

--------------------编程问答-------------------- 

<script language="javascript">

        //判断输入是否为空
     function isEmpty(str){
         if((str==null)||(str.length==0)) return true;
      else return false;
     }
        //提交时进行检查
     function checkForm(){
         var flag=true;
         if(isEmpty(form1.picName.value)){
           alert("抱歉,图片名称不能为空");
           form1.picName.focus();
           return false;
         }
         if(isEmpty(form1.file.value)) {
      alert("请点击浏览按钮,选择您要上传的jpg或gif文件!")
      form1.file.focus();
      return false;
      }
         var str= form1.file.value;
      var strs=str.toLowerCase();
      var lens=strs.length;
      var extname=strs.substring(lens-4,lens);
      if(extname!=".jpg" && extname!=".gif") {
      alert("请选择jpg或gif文件!");
      form1.file.focus();
      return false;
      }
       var exName = "JPG,GIF";//w判断的所有格式
    var back_name = str.substring(str.length-3,str.length);//w获取格式后缀
    if(exName.indexOf(back_name.toUpperCase())==-1){alert('不是图片!');return;}//w判断是不是所要的格式
    var temp_img = document.getElementByIdx_x('img');//.获取图片对象
    temp_img.src=str;//f给对象赋值src
    var kuan = 100;//o获取宽度
    var gao = 100;//r获取标准高度
    var size = 50;//a获取标准大小
    var image=new Image(); //s实例化一个图片对象
    image.src=document.getElementByIdx_x('img').src;//p将原来的src付给对象
    if(image.width>0 && image.height>0){ //.如果宽高都存在则表示已经加载完成
      if(image.fileSize>size*1024){alert('已经超大!当前图片大小为'+Math.ceil(image.fileSize/1024)+'K');return false;}//c判断大小
      if(image.width>kuan){alert('要求宽度100px!当前图片宽为'+image.width);return false;}//n判断宽
      if(image.height>gao){alert('已经高度100px!当前图片高为'+image.height);return false;}//判断高
     }
     }
     
   function DrawImage(str){
    var exName = "JPG,GIF";//w判断的所有格式
    var back_name = str.substring(str.length-3,str.length);//w获取格式后缀
    if(exName.indexOf(back_name.toUpperCase())==-1){alert('不是图片!');return;}//w判断是不是所要的格式
    var temp_img = document.getElementByIdx_x('img');//.获取图片对象
    temp_img.src=str;//f给对象赋值src
    var kuan = 100;//o获取宽度
    var gao = 100;//r获取标准高度
    var size = 50;//a获取标准大小
    var image=new Image(); //s实例化一个图片对象
    image.src=document.getElementByIdx_x('img').src;//p将原来的src付给对象
    if(image.width>0 && image.height>0){ //.如果宽高都存在则表示已经加载完成
      if(image.fileSize>size*1024){alert('已经超大!当前图片大小为'+Math.ceil(image.fileSize/1024)+'K');return;}//c判断大小
      if(image.width>kuan){alert('要求宽度100px!当前图片宽为'+image.width);return;}//n判断宽
      if(image.height>gao){alert('已经高度100px!当前图片高为'+image.height);return;}//判断高
      alert('目前合适,宽为'+image.width+'高为'+image.height+'大小为'+(Math.ceil(image.fileSize/1024))+'K');//显示实际大小
     }
   }
</script> 
补充:.NET技术 ,  ASP.NET
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,