让a标签上传文件

标签：

最近项目中需要写一个功能，如图：我这边采用的结构是

<div class="select_file">

<a href="javascript:void(0);">选择文件</a>

<input type="file" unselectable="on" value="选择文件" />

</div>

css 就是将input标签透明的设置0，这样的话在点击a的时候同时可以触发到input[type=file]实现了点击的上传文件的效果。

.select_file{width: 168px;height: 43px;display: block;border-radius: 25px;margin-left: 60px;border: 1px solid #999999;overflow: hidden;position: relative;}

.select_file a{width: 100%;height: 43px;display: block;text-align: center;line-height: 43px;}

.select_file input{opacity: 0;filter:alpha(opacity=0);position: absolute;margin-top: -43px;width: 100%;height: 43px;z-index: 100;cursor: pointer;font-size: 100px\9;/*兼容ie input file 双击的问题*/}

ps: unselectable="on"   input file这个标签在IE下会有讨厌的闪烁的光标，用这个属性可以消除这个光标~

font-size: 100px\9;  在ie 下这个按钮是在右边的，而chrome是在左边的，用这个css 通过改变内置字体的大小，将框撑大，从而巧妙的将按钮变大，这样可以正常上传文件了，而且解决了ie 下需要双击才能上传文件的问题了~

网上还有一种这样的解决办法利用 JS

$(‘a‘).on(‘click‘, function(e) {
    e.preventDefault();
    $(this).closest(‘input[type=file]‘).trigger(‘click‘);
})

然而这个比较麻烦，实际在使用中，还没有成功。。。弃用了。。

?

让a标签上传文件

标签：

原文地址：http://blog.csdn.net/sunny_desmond/article/details/51353203