檔案上傳按鈕美化加圖片預覽
阿新 • • 發佈：2018-12-29
<style>
.inputfile{
display: none;
visibility: hidden;
}
.shangchuanbutton{
background: #38495d;
color: #fff;
padding: 3px 6px;
display: inline-block;
margin-left: 1rem;
}
#shangchuanname{
width:20rem;
}
</style>
<body>
<td>
<!-- 預覽<div id="image" style="width:50px;height:50px; background:#CCCCCC;display: inline-block;">-->
<!-- <img src="../admin/img/music_icon.jpg" height="50px" width="50px" border="5px"/>-->
<!-- </div>-->
<input type="text" id="shangchuanname" name="data[shangchuanname]" class="input-text" value="<?php echo $Arr['tubiaopath']?>" readonly/>
<label for="file">
<div class="shangchuanbutton">上傳圖示</div>
</label>
<input type="file" name="file" placeholder="上傳檔案" id="file" class="inputfile"/>
<div class="onShow">請選擇圖示,允許上傳的格式是jpg、jpeg、png</div>
</td>
</body>
<script>
document.getElementById('file').onchange = function() {
var imgFile = this.files[0];
// var fr = new FileReader();
document.getElementById('shangchuanname').value = imgFile['name'];
// fr.onload = function() {
// document.getElementById('image').getElementsByTagName('img')[0].src = fr.result;
// };
// fr.readAsDataURL(imgFile);
};
</script>