Javascript 在“文件上载”按钮中显示文件的名称_Javascript_Jquery_Html_Css

Javascript 在“文件上载”按钮中显示文件的名称

javascript jquery html css

Javascript 在“文件上载”按钮中显示文件的名称,javascript,jquery,html,css,Javascript,Jquery,Html,Css,这是我的这是我的Css： label input[type="file"] { display: block; margin-top: -20px; opacity: 0; } 这里我只有文本而不是文件上传按钮，因为我给出了不透明度：0 如何显示所选的文件名注意：我只想在特定浏览器上的上载文本附近显示文件名 if (window.File && window.FileReader && window.FileList && window.B

这是我的

这是我的Css：

label input[type="file"] 
{
display: block;
margin-top: -20px;
opacity: 0;
}

这里我只有文本而不是文件上传按钮，因为我给出了不透明度：0

如何显示所选的文件名

注意：我只想在特定浏览器上的上载文本附近显示文件名

if (window.File && window.FileReader && window.FileList && window.Blob) {
  //  File APIs are supported.
} else {
  alert('The File APIs are not fully supported in this browser.');
}

下面是一个工作示例-。

一种方法是将标记的值添加到onchange事件中，将其设置为文件输入的当前值：

document.getElementById'spanFileName'.innerHTML=this.value这里是，请检查

它显示在上载文本附近选择的文件名。

借助FileListObject中的“文件”属性，您可以显示文件名、准备上载的文件大小

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>FileName</title>
    <style>
        input {
            opacity: 0;
        }
    </style>
</head>

<body>
    <input type="file" multiple="multiple" id="file" onchange="showFileName()">
    <p id="filename"></p>
    <script>
        var x = document.getElementById('file');
        var filename = document.getElementById('filename');

        function showFileName() {
                for (var i = 0; i < x.files.length; i++) {
                    var file = x.files[i];
                    filename.innerHTML = file.name;
                }
    </script>
</body>

</html>

不确定是否可以，我认为浏览器完全出于安全原因阻止了对文件的访问。我可能经常出错，因为我已经在使用onchange的可能副本，即使是用于其他操作，是否也有可能使用它？如果您检查示例，您将看到包含您的代码。onchange=document.getElementById'spanFileName'。innerHTML=this.value；imagechangesupplierthis，57；或者，您也可以添加：document.getElementById'spanFileName'.innerHTML=this.value；在imagechangesupplier函数中。