我想用图片图标替换我的文件字段。因为文件字段看起来不太酷。
查看此相机图标。当有人点击此图标时,浏览窗口打开:
这是JsFiddle DEMO: http://jsfiddle.net/8aJb4/2/
这是我的代码:
HTML:
<div class="container">
<input type="file" name="image_src" id="image_src" >
</div>
CSS:
.container{
width:500px;
border:black solid 1px;
text-align:center;
padding:4px;
}
以下是图片图标的链接: http://postimg.org/image/rg17ffpxh/
答案 0 :(得分:3)
这是Fiddle
<div class="container">
<span class="select-wrapper">
<input type="file" name="image_src" id="image_src" />
</span>
</div>
.container{
width: 500px;
border: 1px solid #333;
padding: 4px;
}
.select-wrapper {
background: url(http://s10.postimg.org/4rc0fv8jt/camera.png) no-repeat;
background-size: cover;
display: block;
position: relative;
width: 33px;
height: 26px;
}
#image_src {
width: 26px;
height: 26px;
margin-right: 100px;
opacity: 0;
filter: alpha(opacity=0); /* IE 5-7 */
}
答案 1 :(得分:2)
HTML
<script>
function upload(){
document.getElementById("image_src").click();
}
</script>
<div class="container">
<img id="img" src="http://postimg.org/image/rg17ffpxh/" onclick="upload()" alt="hello"/>
<input type="file" name="image_src" id="image_src" />
</div>
CSS
.container{
width:500px;
border:black solid 1px;
text-align:center;
padding:4px;
}
#image_src {
position:absolute;
left:-9999px;
}
#img { cursor:pointer; }
我没有让你的图片链接工作,但这里是jsfiddle
答案 2 :(得分:2)
很简单,您只需将文件元素定义为隐藏,并定义一个带有您自己背景的img标记。编写javascript,点击你的img标签,以编程方式点击文件元素。像这样的东西:
<input type="file" name="image_src" id="image_src" hidden='hidden'>
<img src='url' onclick='openWindow()'>
function openWindow(){
document.getElementById("image_src").click
}