HTML5 Input 如何设置不让其显示未选择任何文件|极客教程

HTML5 Input 如何设置不让其显示未选择任何文件

在HTML5中，<input type="file"> 元素用于允许用户选择文件上传。然而，有时候我们希望在用户未选择任何文件时，不显示文件名，本文将介绍如何通过一些技巧来实现这一功能。

1. 使用 `required` 属性

required 属性可以用来指定输入字段为必填项，如果用户未选择文件，则会显示一个提示信息。下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>不显示未选择文件</title>
</head>
<body>
    <form>
        <input type="file" required>
        <input type="submit">
    </form>
</body>
</html>

Output:

HTML5 Input 如何设置不让其显示未选择任何文件

在上面的示例中，如果用户未选择文件就点击提交按钮，会显示一个提示信息，要求用户选择文件。

2. 使用 JavaScript 检测文件是否为空

通过JavaScript可以检测用户是否选择了文件，如果未选择文件，则可以禁用提交按钮。下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>不显示未选择文件</title>
    <script>
        function checkFile() {
            var fileInput = document.getElementById('fileInput');
            var submitButton = document.getElementById('submitButton');

            if (fileInput.files.length === 0) {
                submitButton.disabled = true;
            } else {
                submitButton.disabled = false;
            }
        }
    </script>
</head>
<body>
    <form>
        <input type="file" id="fileInput" onchange="checkFile()">
        <input type="submit" id="submitButton" disabled>
    </form>
</body>
</html>

Output:

HTML5 Input 如何设置不让其显示未选择任何文件

在上面的示例中，当用户选择文件时，提交按钮才会启用，否则会被禁用。

3. 使用 CSS 隐藏文件名

通过CSS可以隐藏文件名，当用户未选择文件时，不会显示文件名。下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>不显示未选择文件</title>
    <style>
        input[type="file"]::-webkit-file-upload-button {
            visibility: hidden;
        }
        input[type="file"]::before {
            content: '选择文件';
            display: inline-block;
            background: #007bff;
            color: #fff;
            padding: 5px 10px;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <form>
        <input type="file">
        <input type="submit">
    </form>
</body>
</html>