需求:前端页面开发中,常遇到图片上传的需求,一般要求限制图片格式及大小。
说明:这里就把实现此功能所需代码贴出来,供同志们参考,也方便我以后复用。
要点: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" οnchange="check()"/>
<!-- 存放页面反馈信息的dom节点 -->
<span id="spacex"></span>
</form>
</body>
<script type="text/javascript">
function check(){
//分割上传文件字符串 userfile的value为上传文件的名称 类型为字符串。
var fileNameArr = document.formx.userfile.value.toLowerCase