用自定样式来替代input的文件上传样式

HTML自带的文件上传选项框样式很原始，对这个元素设置样式并没有行通，所以想通过其他元素的样式来替代它，但将它的文件上传功能与其他元素联系起来。

原始样式：

想实现的效果：

通过讨论目前总结出三个方法：

1、用a标签包裹input，对a标签设置样式，通过定位实现点击a标签时，实际触发了input的文件上传框
    1)HTML

    <a class="imgbtn btn btn-primary" href="##">
        <input type="file" name="front-img" id="front-img" value="" />上传正面
        //注意：文章一定要写在input框后面
    </a>

    2)CSS   ——通过定位与透明实现

        a{
            position: relative;
        }
        a input{
            position: absolute;
            opacity: 0;
        }

2、通过jquery的trigger方法，模拟鼠标点击事件

    $('a').click(function(){
        $('a input').trigger('click')
    })

3、原生js的click()函数

document.querySelector("a").onclick=function(){
    document.querySelector("a input").click();
}