点击自定义按钮下传图片的一种方式

点击自定义按钮上传图片的一种方式

由于上传文件的选择框在界面上占位置且不大好看，而且不同浏览器的样式不一样，像chrome的浏览按钮是在左边，为了不同浏览器都能用我们自定义的美观的按钮点击一下就能弹出文件选择框，我们一般会选择将file 输入框隐藏，然后通过其他的方式触发它，示例代码如下：

<a href="#" id="upload_pic"><img src="custom_btn.png"/></a>
<div class="hide"><input type="file"  id="select_file" /></div>
<script>
$('#upload_pic').on('click',function(){
	$('#select_file').click();
});
</script>

这种方式将点击事件转发到file按钮上，在firefox与chrome上是没有问题的，但在IE下上传文件会报没有权限的错误。

所以最好的一种办法是不用JS控制点击，而直接点击file 输入框，但需要用CSS来控制file 输入框的位置以及显示。

很多网站都采用这种方式，比如新浪微博的上传图片：

点击自定义按钮下传图片的一种方式

html代码：

<div class="laPic_btnmore">            
<a node-type="inputCover" class="W_btn_e" href="javascript:void(0);">                
<span><em class="ico_one"></em>单张图片</span>                
<form action="" method="POST" enctype="multipart/form-data" target="upload_target" name="pic_upload" id="pic_upload" action-type="form" node-type="form">                                    
<input type="file" class="input_f" name="pic1">
</form>
</a>        
</div>

CSS代码：

.laPic_btnmore {
    float: left;
    height: 30px;
    overflow: hidden;
    padding: 0 20px 15px 0;
    text-align: center;
    vertical-align: top;
}


.W_btn_e {
    overflow: hidden;  /*隐藏多余的部分*/
    position: relative;  /*相对位置*/
}

.input_f {
    border: 0 none;
    cursor: pointer;
    font-size: 21px;
    height: 30px;
    left: 0;
    margin: 0;
    opacity: 0;
    padding: 0;
    position: absolute; /*与W_btn_e位置跟随*/
    top: 0;
    width: 100px;
}

点击自定义按钮下传图片的一种方式

相关推荐