怎么在js 里面限制上传图片的大小不能超过 1M?

JavaScript033

怎么在js 里面限制上传图片的大小不能超过 1M?,第1张

这样设置的:

1、先用form标签创建一个上传的表单。

<form id="form1" name="form1" method="post" action="" enctype="multipart/form-data">

 <p><input type="hidden" name="MAX_FILE_SIZE" value="100000" /></p>

 <p><input name="userfile" id="userfile" type="file" onchange="check()"/></p>

</form>

2、用Javascript设置格式和大小。

<script language="JavaScript" type="text/javascript">  function check()    {var aa=document.getElementById("userfile").value.toLowerCase().split('.')//以“.”分隔上传文件字符串   // var aa=document.form1.userfile.value.toLowerCase().split('.')//以“.”分隔上传文件字符串           if(document.form1.userfile.value=="")    {        alert('图片不能为空!')        return false    }    else    {    if(aa[aa.length-1]=='gif'||aa[aa.length-1]=='jpg'||aa[aa.length-1]=='bmp'

||aa[aa.length-1]=='png'||aa[aa.length-1]=='jpeg')//判断图片格式    {var imagSize =  document.getElementById("userfile").files[0].sizealert("图片大小:"+imagSize+"B")if(imagSize<1024*1024*1)        alert("图片大小在1M以内,为:"+imagSize/(1024*1024)+"M")        return true    }    else    {        alert('请选择格式为*.jpg、*.gif、*.bmp、*.png、*.jpeg 的图片')//       return false    }    }    }  </script>

图片超过1M则不能上传 如图:

项目的需求是上传一张图片,然后验证该图片的尺寸,如果跟预期的不符,就不给上传

首先,可以通过new FileReader(),再通过将上传的图片文件传给实例的readAsDataUrl(),当文件加载完成触发onload事件,传递event,通过event.target.result来获取图片的链接(base64格式的)

接着,new Image()实例,将上面获取的链接设置为图片的src属性,当图片加载完成触发onload事件就可以通过width、height属性来读取图片的长宽啦~~