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"
οnchange="" />
<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>
执行后结果：
上传后结果（浏览器显示上传的图片js控制）：
这里关键使用了display:none使原来的<input type="file">浏览器默认的上传图片按钮不显示
然后<lable for="****">，最后图片显示就是js控制了
图片展示比较low，意思到了就行
参考博客：https://blog.csdn.net/zhoucheng05_13/article/details/53839552
最后推荐一份博客：https://www.cnblogs.com/dj3839/p/6027417.html使用springmvc异步后台处理上传的图片
