上傳文件：<input type="file" id="file" />
上傳文件優化樣式
Html：
<p class="liuyanfile">
<label>上傳文件</label>
<a href="#" class="file">選擇文件<input type="file" id="file" /></a>
<span>未選擇任何文件</span>
</p>
Css：
.file {
position: relative;
display: inline-block;
overflow: hidden;
text-indent: 0;
line-height: 35px;
text-align: center;
width: 101px;
height: 35px;
background-image:
linear-gradient(0deg, #e4e4e4 0%, #e6e6e6 39%, #f2f2f2 100%, #797979 100%, #000000 100%),
linear-gradient(#dddddd, #dddddd);
background-blend-mode: normal,normal;
border-radius: 2px;
border: solid 1px #cccccc;
vertical-align: middle;
margin-left: 45px;
}
.file:hover{
color: #010101;
}
.addliuyan .liuyanfile span{
color: #666666;
margin-left: 20px;
}
.file input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
}
上傳圖片優化樣式
Html：
<div class="sh userpic">
<div class="img left">
<img src="img/fixed/userpic.jpg" >
</div>
<a class="left" href="javascript:;">編輯頭像
<input type="file" name="" id="picfile" value="" />
</a>
</div>
Js：
// 上傳圖片
$("#picfile").change(function(){
var filePath = $(this).val();
let fr = new FileReader(); //創建new FileReader()對象
let imgObj = this.files[0];//獲取圖片
fr.readAsDataURL(imgObj);//將圖片讀取為DataURL
if(filePath.indexOf("jpg") != -1 || filePath.indexOf("JPG") != -1 || filePath.indexOf("PNG") != -1 || filePath.indexOf("png") != -1){
fr.onload = function() {
$(".setselfmsg .userpic img").attr("src",this.result);
}
} else {
confirm("您未上傳文件，或者您上傳文件類型有誤！");
return false;
}
})
Css:
.setselfmsg .userpic a{
display: block;
overflow: hidden;
position: relative;
}
.setselfmsg #picfile{
position: absolute;
left: 0;
top:0;
opacity: 0;
font-size: 100px;
}