js實現上傳按鈕並顯示縮圖小輪子
阿新 • • 發佈：2020-05-06
前言
造這個小輪子的起因是因為預設提供的上傳檔案的按鈕屬實醜陋了點，而且還不能直接修改這個按鈕的樣式，所以就打算直接搞個小輪子方便日後需要時使用。使用原生js實現。那麼直接上效果圖。
實現功能：
- 顯示上傳圖片縮圖
- 實現上傳圖片格式限制
預覽效果圖如下
程式碼實現
html程式碼
<html> <head> <meta charset="utf-8" /> <title>uploalFileButton</title> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="file-container"> <div class="file-box"> <input type="file" class="file-btn" accept="image/png,image/jpeg,image/gif" id="file" /> <text>選擇檔案</text> </div> <span id="showFileName"></span> <span id="fileerrorTip"></span> <div class="show_image"> <img src="" id="file_img" /> </div> </div> <script type="text/javascript" src="script.js"></script> </body> </html>
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;
//顯示預覽圖片
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;
}以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。