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>
執行後結果：
上傳後結果（瀏覽器顯示上傳的圖片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異步後臺處理上傳的圖片