上传文件隐藏input type="file"，用text显示

原创于 2015-09-25 16:55:24 发布 · 2w 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端

js 同时被 3 个专栏收录

11 篇文章

订阅专栏

前端

7 篇文章

订阅专栏

html

4 篇文章

订阅专栏

本文探讨了HTML中文件上传组件的设计与实现细节，通过JavaScript增强用户体验，包括隐藏功能的运用，如display:none与visible:hidden的区别，以及如何通过事件监听实现文件选择与预览功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html：


    <label for="upload_file" class="col-sm-2 control-label">上传文件</label>

    <div class="col-sm-4">
        <input type="file" class="form-control" id="upload_file" name="upload_file"
               style="display: none;" onchange="change();">
        <input type="text" class="form-control" id="upload_file_tmp" name="upload_file_tmp"
               readonly="readonly" onclick="upload_file.click(); ">
    </div>
    <div class="col-sm-2">
        <button type="button" class="btn btn-primary" id="select_file"
                onclick="upload_file.click();">浏览
        </button>
    </div>

js：

function change(){
    document.getElementById("upload_file_tmp").value=document.getElementById("upload_file").value;
}

另，

隐藏功能：

display:none 不保留物理空间，彻底消失

visible:hidden 占空间，但看不到

上传文件 隐藏input type="file"，用text显示

上传文件隐藏input type="file"，用text显示