Question

我正在尝试创建一个localhost文件上传程序，以便我可以将文件从手机上传到我的桌面，但是我遇到了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上传脚本出错了，因为它无法找出上传文件的扩展名。

有人可以解释一下这种行为以及我如何能使它表现得更加一致吗？

Answer 1

选择文件时，某些文件选择器会忽略文件扩展名。这意味着文件选择器不向文件输入元素提供文件扩展名信息，这反过来意味着文件在没有扩展名的情况下上传。

处理这种情况的最简单方法是创建一个警告，当用户选择没有扩展信息的文件时让他们知道他们的文件选择器可能省略了扩展名，以便他们使用另一个文件选择器（电话/平板电脑通常允许您选择要用于选择文件的应用程序，而Windows通常只有标准选择对话框。

通过让用户使用不省略扩展名的文件选择器（音乐选择器经常省略扩展名，视频选择器和照片选择器，而通用文件选择器倾向于保留扩展名）来解决此问题。

HTML5文件输入的不一致文件扩展名行为

1 个答案: