Question

我想从输入文件中删除“未选择文件”，然后将“选择”重命名为另一个文本。

"" $(document).ready(function() {    
          var readURL = function(input) {
              if (input.files && input.files[0]) {
                  var reader = new FileReader();

                  reader.onload = function (e) {
                      $('.avatar').attr('src', e.target.result);
                  }

                        reader.readAsDataURL(input.files[0]);
                    }
                }


                $(".file-upload").on('change', function(){
                    readURL(this);
                });
                });""

Answer 1

一种实现此目的的方法（如我几次）是隐藏输入元素，并使用绑定到隐藏文件字段的label元素来接收单击事件。您可以对标签进行样式设置，但可以在合理的范围内使用，这样就应该具有足够的灵活性来完成所需的工作！！

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title></title>
        <style>
            body, body *{ font-family:cursive }
            input[type='file']{
                width: 0px;
                height: 0px;
                opacity: 0;
                overflow: hidden;
                position: absolute;
                z-index: -1;
            }
            input[type='file'] + label{
                font-weight: 700;
                color: black;
                background-color: #E5E4E2;
                display: inline-block;
                border:1px solid black;
                padding:0.25rem;
                width:50%;
                cursor:pointer;
            }
            .input[type='file']:focus + label,
            .input[type='file'] + label:hover {
                background-color: red;
            }
            span{
                color:red
            }
        </style>

    </head>
    <body>
        <form>
                <input type='file' name='photo' id='photo' />
                <label for='photo'>
                    <span>Put your Text here</span>
                </label>
        </form>
        <script>
            /* you can still assign the listeners... */
            document.getElementById('photo').onchange=function(e){
                console.log(this.value)
            }
        </script>
    </body>
</html>

上述内容的冗长版本，以显示一个最小的示例

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title></title>
        <style>
            input[type='file']{
                width: 0px;
                height: 0px;
                opacity: 0;
                overflow: hidden;
                position: absolute;
                z-index: -1;
            }
        </style>
    </head>
    <body>
        <form>
            <input type='file' name='photo' id='photo' />
            <label for='photo'>
                <span>Put your Text here</span>
            </label>
        </form>
    </body>
</html>

有没有一种方法可以从输入文件类型中删除“选择文件”？

1 个答案: