HTML5文件輸入不一致的文件擴展名行爲

我想做一個localhost文件上傳程序，以便我可以將文件從手機上傳到我的桌面，但我遇到了HTML5文件輸入控制問題。HTML5文件輸入不一致的文件擴展名行爲

這裏是代碼演示問題：

<!DOCTYPE html> 
<html> 
    <head> 
    <title>File Input Problem Demo</title> 
    <script> 
let hFileInput = null;  

function performSetup() { 
    hFileInput = document.getElementById('fileInput'); 
}  

function showFilename() { 
    alert(hFileInput.value); 
}  
    </script> 
    </head> 
    <body onload="performSetup()"> 
    <input id="fileInput" type="file"></input> 
    <br /> 
    <button onclick="showFilename()">show filename</button> 
    </body> 
</html>

在我的電話，當我輸入文件到文件輸入，然後按一下按鈕，它顯示的文件名不帶擴展名，而在我的主/主機上，當我按下按鈕時，它會顯示全文件名，包括擴展名。

這反過來使我的php上傳腳本錯誤，因爲它無法找出上傳的文件有什麼擴展名。

有人可以請解釋這種行爲，以及如何使其行爲更連貫？

來源

2016-07-08 Dmitry

你不應該通過查看擴展來測試文件類型。擴展名可以說：'ren nastyvirus.exe cutekittens.jpg'。「哦，看，這是一張jpg圖片！」。 $ _FILES包含MIME類型信息，您應該使用MIME查找工具（如finfo）檢查實際上傳的文件。 –

'alert（hFileInput.files [0] .name）;'而不是值，這是不可靠的。 – dandavis

@MarcB你是對的，但僅僅知道MIME類型是不足以找出文件被髮送的擴展名。一個jpeg可能是.jpg或.jpeg，這是微不足道的，但仍然很高興有這種信息。 – Dmitry

某些文件選擇器在選擇文件時省略了文件擴展名。這意味着文件選擇器不會將文件擴展名信息提供給文件輸入元素，這反過來意味着文件沒有擴展名而被上傳。

處理這種情況的最簡單方法是創建一個警告，當用戶選擇一個沒有擴展信息的文件時，讓他們知道他們的文件選擇器可能省略了擴展名，以便他們使用另一個文件選擇器/平板電腦通常允許您選擇使用哪個應用程序來選擇文件，而Windows通常只有一個標準選擇對話框）。

通過讓用戶使用不忽略擴展名的文件選擇器（音樂選擇器經常忽略擴展名，所以選擇視頻選擇器和照片選擇器，而通用文件選擇器傾向於保留擴展名）來解決此問題。

來源

2016-07-08 20:32:00 Dmitry

我認爲你更多地指的是媒體/畫廊/意圖選擇器，而不是文件選擇器，它通常用於在本地播放內容，而不是上傳完整的完整文件。這些應該是圓形的，溫和的接口。 – dandavis

也許，但他們仍然允許用戶選擇要上傳的文件，並且無法將必要的信息傳遞到文件選擇元素，因此沒有解決方法，數據丟失，開發人員必須意識到這可以碰巧讓用戶在文件無法上傳時不會感到困惑，因爲它沒有擴展名，或者上傳時沒有擴展名，所以邏輯結論保持不變。 – Dmitry

是的，我在自己之前挖了一個錯誤的東西;驗證所有輸入;） – dandavis

HTML5文件輸入不一致的文件擴展名行爲

回答

相關問題