需求：前端页面开发中，常遇到图片上传的需求，一般要求限制图片格式及大小。
说明：这里就把实现此功能所需代码贴出来，供同志们参考，也方便我以后复用。
要点：1.处理 类型type为file的输入元素的value值，进行判断。2.处理类型type为file的输入元素的files[0].size值。
备注：当然value和 size都是浏览器提供的api
代码：
<!DOCTYPE html>
<html>
<body>
<!-- 注意此处form的name属性为form 这样才可以document.form通过name属性获得元素 -->
<form action="" name="formx" method="post" enctype="multipart/form-data">
<!-- 图片选中后触发onchange事件 -->
<input type="file" name="userfile" onchange="check()"/>
<!-- 存放页面反馈信息的dom节点 -->
<span id="spacex"></span>
</form>
</body>
<script type="text/javascript">
function check(){
//分割上传文件字符串 userfile的value为上传文件的名称 类型为字符串。
var fileNameArr = document.formx.userfile.value.toLowerCase().split('.');
//或者document.getElementById("userfile") 也可以获得该dom元素
//文件名后缀
var suffix = fileNameArr[fileNameArr.length-1];
//如果后缀为空
if(suffix==""){
alert("图片不能为空！");
return false;
}else{
if(suffix=='gif'||suffix=='jpg'||suffix=='bmp'||suffix=='png'||suffix=='jpeg'){
var imgSize = document.formx.userfile.files[0].size;
alert("图片大小："+imgSize+"B");
if(imgSize<1024*1024*3){
document.getElementById("spacex").innerText = "文件小于3m ok!";
return true;
}
}else{
document.getElementById("spacex").innerText = "请选择格式为*.jpg、*.gif、*.bmp、*.png、*.jpeg 的图片";
return false;
}
}
}
</script>
</html>