您的位置：首页 > Web前端 > HTML

怎么简便地去掉html中难看的文件上传按钮并实现图片预览功能？

2016-12-23 14:47 1096 查看

问题描述

通常的文件上传按钮是这样的：

选择了文件过后是这样的：

很显然，这样的按钮并不好看。

解决方法

用一个label标签来装载样式，其for属性指向type=file的input，然后将input标签隐藏（display=“none”），这样，在点击label时就会触发input弹出文件选择框。

实例演示

代码：

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
</head>

<body>
<label for="file"><img src="images/2.jpg"></label>
<input type="file" id="file" name="" style="display: none"/>
<div id="image" style="width:100px;height:100px; background:#CCCCCC; ">
<img src="images/2.jpg" height="100px" width="100px" border="5px"/>
</div>
</body>
<script>
document.getElementById('file').onchange = function() {
var imgFile = this.files[0];
var fr = new FileReader();
fr.onload = function() {
document.getElementById('image').getElementsByTagName('img')[0].src = fr.result;
};
fr.readAsDataURL(imgFile);
};
</script>

</html>

效果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航