一种简单的且美观表单上传文件的方式

代码里引用了bootstrap和jQuery

HTML 标签

<form>
    <!-- 隐藏用于真实上传文件的输入框 -->
    <input id="lefile" type="file" style="display: none">
    
        <div class="input-append">

        <input id="photoCover" class="input-large form-control" type="text"
            style="display: inline; width: 400px; margin-left: 10px"> 

                <a class="btn btn-success" onclick="$('input[id=lefile]').click();">浏览 </a>
    </div>
</form>

JavaScript 代码

<script type="text/javascript">
    <!--显示选择的文件的路径-->
    $('input[id=lefile]').change(function() {
        $('#photoCover').val($(this).val());
    });
</script>

效果

image.png