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

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;" οnchange="change();">
        <input type="text" class="form-control" id="upload_file_tmp" name="upload_file_tmp"
               readonly="readonly" οnclick="upload_file.click(); ">
    </div>
    <div class="col-sm-2">
        <button type="button" class="btn btn-primary" id="select_file"
                οnclick="upload_file.click();">浏览
        </button>
    </div>

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显示所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。