在以 PHP、HTML 和 Javascript 上传到服务器之前限制文件名

Question

我在上一个问题中搜索过，但大多数答案只是修剪文件名。但对我来说，我想在用户的文件名长度超过一定数量时向用户显示一条警告消息。

假设我有一个文件上传输入框：

<input type="file" name="userfile" id="userfile" accept="image/jpeg, application/pdf">

当用户上传文件时，一个函数会检测或计算文件名的长度。如果我将长度限制为15，用户只能上传包含扩展名的15个字符名称文件，如mickymouse.jpg，否则如果超过这个数字，则显示警告消息。

我不知道如何在 JavaScript 中做到这一点。感谢您的帮助，非常感谢。

Answer 1

您可以为此使用File.name Web API。

为此，您需要将onchange 事件添加到您的输入字段，然后创建一个javascript 函数来捕获该事件。在该函数中，您将访问所选文件的名称并执行验证。例如：

<input
    type="file" name="userfile" id="userfile"
    accept="image/jpeg, application/pdf"
    onchange="validateFile(this)"
/>

<script>
    function validateFile(fileInput) {
        var files = fileInput.files;
        if (files.length === 0) {
            return;
        }

        var fileName = files[0].name;
        if (fileName.length > 15) {
            alert('File input name to long.');
        }
    }
</script>

值得注意的是，出于安全原因，您应该不使用用户提供的名称存储文件。将其存储在数据库中并在显示用户时用作标签是安全的（等待您先对其进行清理） - 但您保存在服务器上的文件路径应该 100% 由您控制。