从 Android 原生浏览器上传时文件类型为空字符串答案

【问题标题】：File type is empty string when uploading from Android native browser从 Android 原生浏览器上传时文件类型为空字符串
【发布时间】：2014-11-10 12:54:02
【问题描述】：

我在网页上有一个input(type="file")。

<input type='file' name="file" accept="image/*" />

我使用 jQuery 来抓取这样的文件：

$('input').on('change', function(e) {
    console.log(e.target.files[0]);
});

我需要检查 e.target.files[0].type 是否匹配 "image.*" 模式，所以我这样做： var matches = e.target.files[0].type.match('image.*');

这在大多数情况下都可以正常工作，但是当应用程序从 Android 原生浏览器运行时，e.target.files[0].type 是空字符串。如果我选择存储在设备上的图像，就会发生这种情况。如果我用相机拍照e.target.files[0].type 是"image/jpeg"。

以前有人遇到过这个问题吗？

【问题讨论】：

你会写小提琴吗？ files[0].type 通常提供准确的文件类型。还要检查你没有选择任何无效/损坏的文件以防万一。

标签： javascript android jquery file-upload

【解决方案1】：

由于我已经添加了评论，我尝试使用以下代码 sn-p 来制作用例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Image Test</title>
</head>

<body>
  <form method="POST" enctype="multipart/form-data">
    <input type="file" accept="image/*" onchange="previewAndUploadFile(event)"/><br/>
    <img id="imagePreview" width="200" height="200"/>
    <div id="imageType"></div>
  </form>
  <script type="text/javascript">
    function previewAndUploadFile(event) {
        var type = document.getElementById("imageType");
        var file = event.target.files[0];
        try {
            var reader = new FileReader()
            reader.onload = function() {
                var preview = document.getElementById("imagePreview");
                preview.src = reader.result;
            }
            reader.readAsDataURL(file);
            type.innerHTML = file.type;
        } catch(e){
            type.innerHTML = "Invalid image.";
        }
    }
  </script>
</body>
</html>

当文件名为sample.jpeg 并且图像是有效图像时，一切正常。结果是image/jpeg
当文件名为sample（去掉文件扩展名但图片内容仍然有效）时，结果为空字符串。
当图片损坏（在记事本中编辑，可以尝试其他方式）且文件名为sample.jpeg时，图片类型仍为image/jpeg。
重复case-3，图像重命名为sample，图像类型再次变为空字符串。

你的情况可能就是其中之一。

【讨论】：