WEB前端

js限定图片上传的类型(上传bmp,jpg,gif格式的图片)

位置:首页 > WEB前端 > js教程,2019-08-08 10:37
通常情况下,上传图片的类型是需要进行特别的限定,只能够是某些指定的格式,否则就会弹出一些提示,下面就介绍一下如何实现此功能,代码实例如下:

通常情况下,上传图片的类型是需要进行特别的限定,只能够是某些指定的格式,否则就会弹出一些提示,下面就介绍一下如何实现此功能,

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js限定图片上传的类型</title> 
<script type="text/javascript"> 
function checkImage()
{ 
  var filepath=document.getElementById("file").value; 
  if(filepath=="")
  { 
    alert("请选择上传的文件!"); 
  } 
  else
  {
    var extname=filepath.substr(filepath.length-3,filepath.length); 
    if(extname!= "bmp" && extname!= "jpg" && extname!= "gif")
    { 
      alert("只能上传bmp,jpg,gif格式的图片!"); 
      document.getElementById("file").disabled=true; 
    } 
    else
    { 
      document.getElementById("file").disabled=false; 
    } 
  }
} 
</script> 
</head> 
<body> 
<input name="thefile" type="file" id="file" />
<button >点击上传</button>
</body> 
</html>

以上代码实现了我们的要求,可以检测上传图片的类型,当然这只是表单的一个片,在实际应用中,只要整合进去就可以了,下面就介绍一下此效果的实现过程。

一.实现原理:

原理特别的简单,就是检测图片名称的点(.)后面的字符串是否在指定的格式之内,如果在就合格,否则不合格,这里不多介绍了,具体看代码注释。

二.代码注释:

1.function checkImage(){},声明一个检测图片类型的函数。

2.var filepath=document.getElementById("file").value,获取上传控件中的路径值。

3.if(filepath==""){ alert("请选择上传的文件!"); } ,没有没有选择上传的文件,那么就提示为空。

4.var extname=filepath.substr(filepath.length-3,filepath.length),截取字符串,也就是路径字符串的后三位字符,也就是图片的格式(当然图片的格式类型并非都是四位的)

5.if(extname!= "bmp" && extname!= "jpg" && extname!= "gif"),判断是否是这几种类型。

最好说明:

此代码只是演示一种思路,如需在实际中应用还是需要进行修改的。

TAGS:js限定图片上传的类型

猜你喜欢

NewHot