Javascript 有没有办法从输入文件类型中删除“选择的文件”？_Javascript_Html

Javascript 有没有办法从输入文件类型中删除“选择的文件”？

javascript html

Javascript 有没有办法从输入文件类型中删除“选择的文件”？,javascript,html,Javascript,Html,我想从输入文件中删除未选择的文件，然后将“选择”重命名为其他文本 "" $(document).ready(function() { var readURL = function(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onl

我想从输入文件中删除未选择的文件，然后将“选择”重命名为其他文本

"" $(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);
                });
                });""

一种方法是隐藏输入元素，并使用一个绑定到隐藏文件字段的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>

可能重复使用css隐藏元素，并提供您自己的，将事件传递给&from的方法很好，但是为什么这么粗糙？填充、颜色、边框。。。选择你的命运已经足够了。它基本上是从我的一个页面复制的，那里有这些样式-OP可以并且毫无疑问会在ideaI周围生成他/她自己的css和标记。明白了，这一点很清楚。只是就我个人而言，我更喜欢一个最小的例子，没有额外的。请原谅-没问题-我理解你的意思。。。一旦我能找到我的粗剪刀并进行必要的调整，一个更精简的版本就会出现在上面-