<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>
文件上传按钮美化加图片预览
猜你喜欢
转载自blog.csdn.net/qq_34873894/article/details/85335995
今日推荐
周排行