html - 自定义输入类型=“文件”

Question

我想将输入 type="file" 的默认外观更改为这样的

我该怎么做？我正在使用引导程序 5.0

标签： htmljquerycssbootstrap-5

Answer 1

一种可能的方法是<input>像往常一样包含一个元素，并用一些 CSS 隐藏它，然后添加一个图像并使用 Javascript 来处理onclick和onchange事件。

下面的代码片段寻找对图像的点击并触发对（不可见）<input>元素的点击。一旦选择了文件，在表单上触发的change事件就会触发。<input>submit

请注意，“提交”事件在 Stack Overflow 沙箱中被阻止，因此如果您运行该代码段那么远，您将看到一条错误消息。

(function(){
        document.getElementById('sil').addEventListener('click', function(){
            document.getElementById('photoFile').click();
        document.getElementById('photoFile').addEventListener('change', function(){
               document.getElementById('myForm').submit();
            });
        });
    })()

input[type=file] {
           display:none;
        }
        img {
            width:100px;
            cursor:pointer;
        }

<form method="post" enctype="multipart/form-data">
    <img src="https://i.stack.imgur.com/uNJLP.png" id="sil">
    <input type='file' name='photoFile' id='photoFile'>
</form>