使用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使用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％控制。