用Bootstrap3 input file 做一个漂亮的文件框

<div class="input-group">
    <span class="input-group-addon">文件:</span>
    <input id="test1" type="file" class="form-control hidden"onchange="document.getElementById('test2').value = this.value">
    <input id="test2" type="button" class="btn btn-default form-control" value="请选择文件" onclick="document.getElementById('test1').click()">
    <span class="input-group-btn">
        <button type="button" class="btn btn-primary" id="test3">认证</button>
    </span>
</div>

原理:隐藏原本默认文件框,再做一个按钮,通过点击这个按钮,间接触发隐藏的文件框点击事件,选择文件后,触发onchange事件(value发生变化就会触发这个事件),在这个事件里把value值再传递给我们写的那个按钮就OK拉。

猜你喜欢

转载自blog.csdn.net/sdalsdsdf/article/details/87859283