记一次简单的图片上传验证:

页面:<input type="file" id="hiddenFile" onchange="uploadImage(event)" accept="image/jpg, image/jpeg, image/gif, image/png">立即上传图片js:
function uploadImage(e) {//图片的提前校验,如果返回false,则代表校验不成功if(!preSubmitFileCheck(e)){console.info("验证失败，显示提示框");return;}//后面就是调用ajax,将图片传到后台的图片服务器或者文件服务器//然后ajax返回图片上传后的路径,//最后在页面渲染,供用户点击查看.
}//ie浏览器必须是图片的后缀,非ie还会校验图片大小,不能超过5兆
function preSubmitFileCheck(e){var fileTypes =["jpeg","jpg","png","gif"];if(window.navigator.userAgent.indexOf("MSIE")>=1){//ie浏览器//只看后缀是不是给定的四种,不是就不通过//ie暂时还没有获得文件大小的合适方法,欢迎前端大神在评论区补充var filePath = document.selection.createRange().text;var type = filePath.substring(filePath.lastIndexOf('.') + 1);for (var i = 0; i < fileTypes.length; i++) {if (fileTypes[i] == type) {typeFlag = true;break;}}if (!typeFlag) {alert("上传格式不符，请重新上传！");return false;}}else{//非ie浏览器var files = e.target.files, fs = files.length, s = 0;for (var i = 0; i < fs; i++) {var name = files[i].name;console.log("图片大小:size:"+files[i].size)if(files[i].size > 5*1024*1024){//对图片大小限制,大于5兆也不行sizeFlag = true;}var type = name.substring(name.lastIndexOf('.') + 1);typeFlag = false;for (var j = 0; j < fileTypes.length; j++) {if (fileTypes[j] == type) {typeFlag = true;break;}}if (!typeFlag || sizeFlag) {alert("上传格式不符，请重新上传！");}}}//到这里代表校验通过了return true;
}