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

代码里引用了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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容