Question

这是我的Fiddle

这是我的Css：

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

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

如何显示所选的文件名

注意：我只想在上传文本附近显示文件名

Answer 1

特定浏览器上的文件API depends。

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.');
}

以下是一个工作示例 - http://jsfiddle.net/g23ytpby/。

Answer 2

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

＆＃13;

document.getElementById('spanFileName').innerHTML = this.value

＆＃13;

正如您在完整示例中所看到的那样：

＆＃13;

Upload File: 
<input type="file" onchange=" document.getElementById('spanFileName').innerHTML = this.value; imagechangesupplier(this,57);" style="display:block;margin-top: -20px;opacity: 0;" >
<br />
<br />
File Selected: <span id='spanFileName'></span>

＆＃13;

＆＃13; 您需要注意的一件事是，使用此方法始终生成文件的名称并添加＆c; c：/ fakepath /＆＃39;作为前缀。您只需替换文本即可获得文件名。

Answer 3

这是JSFiddle Link，请查看!!

显示在上传文字附近选择的文件名。

Answer 4

借助 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>

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

4 个答案: