HTML:
<form action="http://www.baidu.com" id="form"> <img id="tempimg" dynsrc="logo.png" src="" /> <input type="file" name="file" id="fileuploade" size="40" /> <input type="button" id="check" name ="check" value="checkfilesize" /> <input type="submit" style="120px;" id="submit1" value="提交" /> </form>
JS:
var obj_file = document.getElementById("fileuploade"), check = $("#check"), sub = $("#submit1"); var flag = false; function checkfile(obj_file, maxsize){ var filesize = 0; if(obj_file.files){ filesize = obj_file.files[0].size; }else{ var obj_img = document.getElementById('tempimg'), obj_img.dynsrc = obj_file.value, filesize = obj_img.fileSize; } if(filesize == -1){ flag = false; console.log("有错误"); }else if(filesize > maxsize){ flag = false; console.log("超过10k啦"); }else{ flag = true; console.log("文件大小符合要求"); } } check.click(function(){ checkfile(obj_file, 100000); }); sub.click(function(e){ //e.preventDefault(); if(!flag){ return false; } });
说明
1. 现代浏览器支持 obj_file.files, IE9876不支持,所以获取图片兼容
2. 图片的 dynsrc http://www.w3school.com.cn/media/media_browservideos.asp dynsrc 属性不是标准的 HTML 或 XHTML 元素。仅有 Internet Explorer 支持该属性。
3. 阻止表单提交 可以 return false; 也可以 e.preventDefault();