HTML & CSS & JavaScript - “隐藏” input type=file 按钮后面的文字

最新推荐文章于 2023-02-07 11:31:56 发布

好好活着，不要熬夜

最新推荐文章于 2023-02-07 11:31:56 发布

阅读量4.9k

点赞数 5

本文链接：https://blog.csdn.net/qq_29761395/article/details/119700385

版权

HTML & CSS & JavaScript 专栏收录该内容

66 篇文章 1 订阅

订阅专栏

文章目录

参考

<input type="file" /> 默认的样式：

在这里插入图片描述

实际上，你无法单独隐藏 <input type="file" /> 元素所展现的按钮后面的文字。但是，可以通过隐藏整个元素，然后使用其他元素（简称 B）代替它出现，就可以“间接地”隐藏 <input type="file" /> 元素所展现的按钮后面的文字。当点击 B 时，调用已经隐藏的 <input type="file" /> 元素的 click() 方法，同样可以实现类似用户点击 <input type="file" /> 元素所展现的按钮的效果。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>input type="file"</title>
    </head>
    <body>
        <input type="button" value="选择文件" />
        <input type="file" accept="image/*" style="display: none;" />
        
        <script type="text/javascript">
            window.onload = (event) => {
                main();
            }
            
            function main() {
                const inputButton = document.querySelector("input[type='button']")
                const inputFile = document.querySelector("input[type='file']")
                
                inputButton.onclick = (event) => {
                    inputFile.click();
                }
                
                inputFile.onchange = (event) => {
                    const files = event.target.files;
                    
                    console.log(files);
                }
            }
        </script>
    </body>
</html>

在这里插入图片描述

参考

Using hidden file input elements using the click() method

好好活着，不要熬夜

关注

5
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
HTML & CSS & JavaScript - “隐藏” input type=file 按钮后面的文字

文章目录参考<input type="file" /> 默认的样式：实际上，你无法单独隐藏 <input type="file" /> 元素所展现的按钮后面的文字。但是，可以通过隐藏整个元素，然后使用其他元素（简称 B）代替它出现，就可以“间接地”隐藏 <input type="file" /> 元素所展现的按钮后面的文字。当点击 B 时，调用已经隐藏的 <input type="file" /> 元素的 click() 方法，同样可以实现类似用户点击
复制链接

扫一扫