JS 在客户端判断将要上传图片的大小和类型的问题

时间：2022-08-28 08:13:59
我想做一个js，可以让我在客户上传图片前，就对图片的大小（不能超过2M）和类型（只允许jpg和gif）进行判断，并获得图片的长和宽。

下面这个是我初步写的，用来获取图片长、宽的，但是我发现时灵时不灵。请高人指点，并帮忙将对图片大小和类型的限制方面的内容补充进去。

拜谢！！

BTW: 在获得图片的长、宽后，我通过什么方法能将值传递给php?

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>1</title>
<script>
function func()
{
var image = new Image();
image.src = document.form1.file1.value;
image.onreadystatechange=function(){
if (image.readyState=="complete") {
alert(["图片宽高是:"image.width,image.height]);
}
}
}
</script>
</head>
<body>
<table width="50%" valign="botom" height="22" border="1">
<form method="post" name="form1" enctype="multipart/form-data">
<tr>
  <td><input type="file" name="file1" size="20" value="" onchange="func()"></td>
   </td>
</tr>
</form>
</table> 
</body>
</html>

15 个解决方案

#1

如果不行，我就只好在服务器端判断了..........

大家多帮忙啊~

#2

由于安全性问题是不能直接访问客户端文件的

最好是上传到服务器后再判断过，如果你一定需要这个功能，可以使用iframe先提交到服务器然后再返回相关信息

可以去这里查看我的回复，这个是生成缩略图的，你更改下其中的php代码，获取你需要的信息判断下然后输出对应的js


http://topic.csdn.net/u/20080826/12/f2e5cc28-2750-41f5-bae7-1bf0d210f439.html

#3

客户端只能根据后缀名判断
为了安全服务器端肯定要判断一次的

#4

哦？

这么说php的file_type就能够保证安全喽？

#5

不懂php
.net的话是用
if (!(file.ContentType == "image/gif" || file.ContentType == "image/pjpeg"))
来判断
估计原理差不多

#6

引用 3 楼 cloudgamer 的回复:
客户端只能根据后缀名判断 
为了安全服务器端肯定要判断一次的

嗯，说的对，还是在服务器端判断吧。

#7

这是PHP if(file_type!="image/pjpeg") 基本差不太多

#8

不单只要客户断判断，还得在服务端判断

#9

引用 6 楼 jhwcd 的回复:
引用 3 楼 cloudgamer 的回复:
客户端只能根据后缀名判断 
为了安全服务器端肯定要判断一次的 
 
嗯，说的对，还是在服务器端判断吧。

#10



<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>无标题文档</title>


</head>


<body>

<form   name=Myform >  

<p><font color="red" size="6">上传文件支持格式：gif,jpg,jpeg,png,bmp</font></p>

  <p>上传文件大小限制：

    <input type="text" size="4" value="100" name="fileSizeLimit" id="fileSizeLimit"/>

    K</p>

 <p>

  图片高度大小限制：<input type="text" size="4" value="100" name="heightLimit" id="heightLimit"/>

 </p>

 <p>

  图片宽度大小限制：<input type="text" size="4" value="100" name="widthLimit" id="widthLimit"/>

 </p>

  <p>   

    <input   type=file   name=photo onchange="changeSrc(this)" />

    

   

  预览：<img src="about:blank" id="fileChecker"  name="fileChecker" alt="test"/>

</p>

  <p>

    <input   type=submit   value=submit>

  </p>

</form>   

<SCRIPT   LANGUAGE="JavaScript"><!--

/**

 判断要上传的图片文件大小、长度和宽度！

*/   

  function   CheckFileSize()   

  { 

    var limit = document.getElementById("fileSizeLimit").value * 1024;

 var width = document.getElementById("widthLimit").value ;

 var height = document.getElementById("heightLimit").value;

 

 if (oFileChecker.fileSize > limit)

 {

  alert("文件大小:"+oFileChecker.fileSize+"字节 too large!");

 }

 else

 {

  alert("文件大小:"+oFileChecker.fileSize+"字节ok");

 }

 

   if(  oFileChecker.height> height){

  alert("文件高度:"+oFileChecker.height+" too height!");

 }

 else

 {

  alert("文件高度:"+oFileChecker.height+"ok");

 }

  if(  oFileChecker.width> width){

  alert("文件宽度:"+oFileChecker.width+" too height!");

 }

 else

 {

  alert("文件宽度:"+oFileChecker.width+"ok");

 }

      return   false;   

  } 

  var right_type=new Array(".gif",".jpg",".jpeg",".png",".bmp");


  var oFileChecker = document.getElementById("fileChecker");


function changeSrc(filePicker)

{ 

 if(!checkImgType(filePicker.value))

 {

  alert("文件格式不正确！");

  return;

 }

 oFileChecker.src = filePicker.value;

}


oFileChecker.onreadystatechange = function ()

{ 

 if (oFileChecker.readyState == "complete")

 {

  CheckFileSize();

 }

}


 /**

   判断上传文件格式是否正确

 */

 function checkImgType(fileURL)

{

 //本程序用来验证后缀，如果还有其它格式，可以添加在right_type;

 var right_typeLen=right_type.length;

 var imgUrl=fileURL.toLowerCase();

 var postfixLen=imgUrl.length;

 var len4=imgUrl.substring(postfixLen-4,postfixLen);

 var len5=imgUrl.substring(postfixLen-5,postfixLen);

 for (i=0;i<right_typeLen;i++)

 {

  if((len4==right_type[i])||(len5==right_type[i]))

  {

   return true;

  }

  }

}

  //--></SCRIPT>  

</body>

</html>

#11

上面就是一个客户端判断图片大小和类型的代码，建议在服务端也做一次判断

#12

多谢了！

#13

程序我记下了。
但是不准备用这种方法判断了，因为毕竟还是要在服务器端判断一次。

#14

java 在服务端怎么判断呢

#15

java 在服务端怎么判断呢

#1

如果不行，我就只好在服务器端判断了..........

大家多帮忙啊~

#2

由于安全性问题是不能直接访问客户端文件的

最好是上传到服务器后再判断过，如果你一定需要这个功能，可以使用iframe先提交到服务器然后再返回相关信息

可以去这里查看我的回复，这个是生成缩略图的，你更改下其中的php代码，获取你需要的信息判断下然后输出对应的js


http://topic.csdn.net/u/20080826/12/f2e5cc28-2750-41f5-bae7-1bf0d210f439.html

#3

客户端只能根据后缀名判断
为了安全服务器端肯定要判断一次的

#4

哦？

这么说php的file_type就能够保证安全喽？

#5

不懂php
.net的话是用
if (!(file.ContentType == "image/gif" || file.ContentType == "image/pjpeg"))
来判断
估计原理差不多

#6

引用 3 楼 cloudgamer 的回复:
客户端只能根据后缀名判断 
为了安全服务器端肯定要判断一次的

嗯，说的对，还是在服务器端判断吧。

#7

这是PHP if(file_type!="image/pjpeg") 基本差不太多

#8

不单只要客户断判断，还得在服务端判断

#9

引用 6 楼 jhwcd 的回复:
引用 3 楼 cloudgamer 的回复:
客户端只能根据后缀名判断 
为了安全服务器端肯定要判断一次的 
 
嗯，说的对，还是在服务器端判断吧。

#10



<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>无标题文档</title>


</head>


<body>

<form   name=Myform >  

<p><font color="red" size="6">上传文件支持格式：gif,jpg,jpeg,png,bmp</font></p>

  <p>上传文件大小限制：

    <input type="text" size="4" value="100" name="fileSizeLimit" id="fileSizeLimit"/>

    K</p>

 <p>

  图片高度大小限制：<input type="text" size="4" value="100" name="heightLimit" id="heightLimit"/>

 </p>

 <p>

  图片宽度大小限制：<input type="text" size="4" value="100" name="widthLimit" id="widthLimit"/>

 </p>

  <p>   

    <input   type=file   name=photo onchange="changeSrc(this)" />

    

   

  预览：<img src="about:blank" id="fileChecker"  name="fileChecker" alt="test"/>

</p>

  <p>

    <input   type=submit   value=submit>

  </p>

</form>   

<SCRIPT   LANGUAGE="JavaScript"><!--

/**

 判断要上传的图片文件大小、长度和宽度！

*/   

  function   CheckFileSize()   

  { 

    var limit = document.getElementById("fileSizeLimit").value * 1024;

 var width = document.getElementById("widthLimit").value ;

 var height = document.getElementById("heightLimit").value;

 

 if (oFileChecker.fileSize > limit)

 {

  alert("文件大小:"+oFileChecker.fileSize+"字节 too large!");

 }

 else

 {

  alert("文件大小:"+oFileChecker.fileSize+"字节ok");

 }

 

   if(  oFileChecker.height> height){

  alert("文件高度:"+oFileChecker.height+" too height!");

 }

 else

 {

  alert("文件高度:"+oFileChecker.height+"ok");

 }

  if(  oFileChecker.width> width){

  alert("文件宽度:"+oFileChecker.width+" too height!");

 }

 else

 {

  alert("文件宽度:"+oFileChecker.width+"ok");

 }

      return   false;   

  } 

  var right_type=new Array(".gif",".jpg",".jpeg",".png",".bmp");


  var oFileChecker = document.getElementById("fileChecker");


function changeSrc(filePicker)

{ 

 if(!checkImgType(filePicker.value))

 {

  alert("文件格式不正确！");

  return;

 }

 oFileChecker.src = filePicker.value;

}


oFileChecker.onreadystatechange = function ()

{ 

 if (oFileChecker.readyState == "complete")

 {

  CheckFileSize();

 }

}


 /**

   判断上传文件格式是否正确

 */

 function checkImgType(fileURL)

{

 //本程序用来验证后缀，如果还有其它格式，可以添加在right_type;

 var right_typeLen=right_type.length;

 var imgUrl=fileURL.toLowerCase();

 var postfixLen=imgUrl.length;

 var len4=imgUrl.substring(postfixLen-4,postfixLen);

 var len5=imgUrl.substring(postfixLen-5,postfixLen);

 for (i=0;i<right_typeLen;i++)

 {

  if((len4==right_type[i])||(len5==right_type[i]))

  {

   return true;

  }

  }

}

  //--></SCRIPT>  

</body>

</html>

#11

上面就是一个客户端判断图片大小和类型的代码，建议在服务端也做一次判断

#12

多谢了！

#13

程序我记下了。
但是不准备用这种方法判断了，因为毕竟还是要在服务器端判断一次。

#14

java 在服务端怎么判断呢

#15

java 在服务端怎么判断呢
标签：

相关文章