js判断上传图片类型与大小

发布时间:2020-01-02编辑:脚本学堂
如何用js在客户端判断上传图片类型,以及上传图片的文件大小,这里分享一例代码,有需要的朋友参考下。

用js判断上传图片的类型与大小、宽高等信息。

代码:
 

复制代码 代码示例:

/*
*
* Filename: uploadimg.js
* Description:js判断上传图片类型 以及图片文件大小,和高度宽度尺寸大小控制
* Version: 1.0
* Created: 2013.08.11
* Author: liangjw
* E-mail : liangjw0504@163.com
* Q   Q   : 592568532
* Company: Copyright (C) Create Family Wealth Power By Peter
**/
 * 备注信息: 上传部分自己总结的常用方法的封装,有不足和不完美之处,希望大家指出来,愿意一起
 * 主要研究erp,cms,crm,b2b,oa等系统和网站的开发,欢迎有共同追求和学的IT人员一起学习和交流。
 * 学习和讨论有关asp.net  mvc ,Ajax ,jquery ,html/css, xml ,sqlserver ,wpf,IIS以及服务器的搭建和安全性相关技术的交流和学习。

/*
 * 判断图片类型
 * 
 * @param ths 
 *  type="file"的javascript对象
 * @return true-符合要求,false-不符合
 */ 
function checkImgType(ths){ 
    if (ths.value == "") { 
alert("请上传图片"); 
return false; 
    } else { 
if (!/.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(ths.value)) { 
    alert("图片类型必须是.gif,jpeg,jpg,png中的一种"); 
    ths.value = ""; 
    return false; 

 else
{
     var img=new Image();
     img.src=filepath;  
  while(true){
 if(img.fileSize>0){
 if(img.fileSize>10*1024){      
     alert("图片不大于10M。");
      return false;
      }
      break;
     }

  }
  }
    } 
    return true; 

/*
 * 判断图片大小
 * 
 * @param ths 
 *  type="file"的javascript对象
 * @param width
 *  需要符合的宽 
 * @param height
 *  需要符合的高
 * @return true-符合要求,false-不符合
 */ 
function checkImgPX(ths, width, height) { 
    var img = null; 
    img = document.createElement("img"); 
    document.body.insertAdjacentElement("beforeEnd", img); // firefox不行 
    img.style.visibility = "hidden";  
    img.src = ths.value; 
    var imgwidth = img.offsetWidth; 
    var imgheight = img.offsetHeight; 
     
    alert(imgwidth + "," + imgheight); 
     
    if(imgwidth != width || imgheight != height) { 
alert("图的尺寸应该是" + width + "x"+ height); 
ths.value = ""; 
return false; 
    } 
    return true; 
}