记录是为了更好的成长！
1、代码示例（显示并判断图片大小和格式）
<!DOCTYPE html><html> ???<head> ???????<meta charset="utf-8" /> ???????<title></title> ???????<script src="js/jquery-3.3.1.js"></script> ???</head> ???<body> ???????<img id="imghead" ?width="260" height="180" /> <!--图片显示位置--> ???????<input type="file" name="file" id="file" onchange="getPhotoSize(this)" /> ???????????????<script> ???????????// 选择图片显示 ???????????function imgChange() { ???????????????//获取点击的文本框 ???????????????var file =document.getElementById("file"); ???????????????var imgUrl =window.URL.createObjectURL(file.files[0]); ???????????????var img =document.getElementById(‘imghead‘); ???????????????img.setAttribute(‘src‘,imgUrl); // 修改img标签src属性值 ???????????}; ???????????????????????function lookImg() { ???????????????$("#img_a").remove(); ???????????????$("#show").show(); ???????????????var r= new FileReader(); ???????????????f=document.getElementById(‘file‘).files[0]; ???????????????r.readAsDataURL(f); ???????????????r.onload=function (e) { ???????????????????document.getElementById(‘show‘).src=this.result; ???????????????}; ???????????} ???????????????????????//判断照片大小 ???????????function getPhotoSize(obj){ ???????????????//文件type ???????????????var photoExt = obj.value.substr(obj.value.lastIndexOf(".")).toLowerCase(); ???????????????if(!(photoExt==‘.jpg‘||photoExt==‘.png‘||photoExt==‘.jpeg‘||photoExt==‘.gif‘)){ ???????????????????alert("文件格式不符合要求！"); ???????????????????document.getElementById(‘file‘).value=‘‘; ???????????????????return false; ???????????????} ???????????????var fileSize = 0; ???????????????var isIE = /msie/i.test(navigator.userAgent) && !window.opera; ?????????????????????if (isIE && !obj.files) { ????????????????????????var filePath = obj.value; ?????????????????????????var fileSystem = new ActiveXObject("Scripting.FileSystemObject"); ?????????????????????var file = fileSystem.GetFile (filePath); ???????????????????????????fileSize = file.Size; ????????????????????} ???????????????else{ ???????????????????fileSize = obj.files[0].size; ??????????????????} ????????????????//文件大小 ???????????????fileSize=Math.round(fileSize/1024*100)/100; ????????????????if(fileSize>=200){ ???????????????????alert("图片过大，超过200k,请选择较小的图片"); ???????????????????document.getElementById(‘file‘).value=‘‘; ???????????????????return false; ???????????????} ???????????????imgChange(); ???????????} ???????</script> ???</body></html>以上内容代表个人观点，仅供参考，不喜勿喷。。。
页面图片上传前，让图片在页面显示
原文地址：https://www.cnblogs.com/newbest/p/10031799.html