html更改上传图片样式，并显示更改后的图片，增加js验证大小，没样式搓的不忍直视

本文主要是介绍html更改上传图片样式，并显示更改后的图片，增加js验证大小，没样式搓的不忍直视，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

html更改上传图片样式，原版的实在搓，虽然本人制作的也比较low，但马虎着凑活着用吧

博主还加了谷歌火狐的计算上传文件大小的js验证，如果上传文件为空或者文件过大有弹窗提示

不多哔哔了，直接上代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>上传头像</title></head><script src="js/jquery-3.2.1.js"></script><style type="text/css">#userimage {width: 200px;height: 200px;border: 1px solid lightgrey;}#usertouxiang {width: 200px;height: 200px;background: #CCCCCC;}#upfilebutton {font-size: 18px;background-color: tomato;color: white;border-radius: 5px;}.uplabel {width: 200px;height: 30px;margin-top: 20px;}</style><body><input type="file" id="upfile" name="" style="display: none" accept="image/png, image/jpeg, image/gif, image/jpg"onchange="" /><div id="usertouxiang"><img id="userimage" src="img/defaulting.jpg" /><!-- 给予一个初始默认图片，不然显示不太友好 --></div><div class="uplabel"><center><label id="upfilebutton" for="upfile">上传头像</label></center></div></body><script>document.getElementById('upfile').onchange = function() {var maxsize = 2 * 1024 * 1024; //设置文件大小2兆var maxMsg = "上传的图片不能超过2兆";var tipMsg = "您的浏览器不支持计算上传文件大小，请上传2兆以内的文件，建议使用谷歌浏览器";var browserCfg = {};var ua = window.navigator.userAgent;if (ua.indexOf("Firefox") >= 1) {browserCfg.firefox = true;} else if (ua.indexOf("Chrome") >= 1) {browserCfg.chrome = true;}try{var obj_file = document.getElementById("upfile");if (obj_file.value == "") {alert("请先选择上传文件");return;}var filesize = 0;if (browserCfg.firefox || browserCfg.chrome) {filesize = obj_file.files[0].size;} else {alert(tipMsg);return;}if(filesize==-1){alert(tipMsg);return;}else if(filesize>maxsize){alert(maxMsg);return;}else{var imgFile = this.files[0];var fr = new FileReader();fr.onload = function() {document.getElementById('userimage').src = fr.result;};fr.readAsDataURL(imgFile);}}catch(e){alert(e);}};</script></html>

执行后结果：