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

文章目录

  • 参考

默认的样式:

HTML & CSS & JavaScript - “隐藏” input type=file 按钮后面的文字_第1张图片

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

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>

HTML & CSS & JavaScript - “隐藏” input type=file 按钮后面的文字_第2张图片

参考

Using hidden file input elements using the click() method

你可能感兴趣的:(HTML,&,CSS,&,JavaScript,JavaScript,HTML,CSS)