记录是为了更好的成长！
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>
以上内容代表个人观点，仅供参考，不喜勿喷。。。