這篇文章主要講解了js實(shí)現(xiàn)上傳按鈕并顯示縮略圖小輪子的方法，內(nèi)容清晰明了，對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會(huì)有幫助。
夏邑ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書(shū)未來(lái)市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)建站的ssl證書(shū)銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18980820575（備注：SSL證書(shū)合作）期待與您的合作！
前言
造這個(gè)小輪子的起因是因?yàn)槟J(rèn)提供的上傳文件的按鈕屬實(shí)丑陋了點(diǎn)，而且還不能直接修改這個(gè)按鈕的樣式，所以就打算直接搞個(gè)小輪子方便日后需要時(shí)使用。使用原生js實(shí)現(xiàn)。那么直接上效果圖。
實(shí)現(xiàn)功能：
預(yù)覽效果圖如下
代碼實(shí)現(xiàn)
html代碼
uploalFileButton 選擇文件 ![]()
JavaScript代碼
重慶分公司
重慶分公司
(function(){
var fileBtn = document.getElementById('file');
var showName = document.getElementById('showFileName');
var errorTip = document.getElementById('fileerrorTip');
var fileImg = document.getElementById('file_img');
fileBtn.onchange = function(){
try{
var fileName = this.files[0].name;
// 限制圖片上傳類型
if(fileName.indexOf("jpg") != -1 || fileName.indexOf("png") != -1) {
errorTip.innerHTML = "";
showName.innerHTML = fileName;
//顯示預(yù)覽圖片
var file = this.files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onloadend = function(e) {
fileImg.src = e.target.result;
fileImg.style["display"] = "unset";
};
} else {
showName.innerHTML = "";
errorTip.innerHTML = "您未上傳文件，或者您上傳文件類型有誤！";
return false
}
}catch(e){}
}
})()CSS代碼
.file-container{
display: inline-block;
}
.file-box{
display: inline-block;
position: relative;
padding:8px 25px;
overflow: hidden;
color:#fff;
background-color: #4387CD;
border-radius: 5px;
cursor: pointer;
vertical-align: bottom;
}
.file-btn{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
outline: none;
filter:alpha(opacity=0);
opacity: 0;
}
#showFileName, #fileerrorTip{
vertical-align: bottom;
}
.show_image{
width: 100px;
padding: 5px;
margin: 5px 0;
border: 1px solid #ccc;
border-radius: 5px;
}
.show_image img{
display: none;
width: 100px;
}看完上述內(nèi)容，是不是對(duì)js實(shí)現(xiàn)上傳按鈕并顯示縮略圖小輪子的方法有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
