上传前如何用javascript检查MIME文件类型？

Question

上传前如何用javascript检查MIME文件类型？

我读过这，这个和这，这个似乎可以在客户端使用javascript检查文件MIME类型的问题。现在，我知道真正的验证仍然必须在服务器端进行。我希望执行客户端检查，以避免不必要的服务器资源浪费。

为了测试是否可以在客户端执行此操作，我更改了JPEG测试文件.png并选择要上载的文件。在发送文件之前，我使用javascript控制台查询文件对象：

document.getElementsByTagName('input')[0].files[0];

这就是我在Chrome 28.0上得到的：

文件{webkitRelativePath：“，lastModifiedDate：2012年10月16日10：00 GMT+0000(UTC)，名称：”test.png“，键入：”Image/png“，大小：500055…}

它显示类型为image/png这似乎表明检查是基于文件扩展名完成的，而不是MIME类型。我尝试了Firefox22.0，它给了我同样的结果。但根据W3C规范, MIME嗅探应该执行。

我说的对吗？目前没有办法用javascript检查MIME类型吗？还是我遗漏了什么？

Answer 1

如果您只想检查上传的文件是否是图像，可以尝试将其加载到<img>为任何错误回调标记一个检查。例子：var&nbsp;input&nbsp;=&nbsp;document.getElementsByTagName('input')[0];var&nbsp;reader&nbsp;=&nbsp;new&nbsp;FileReader();reader.onload&nbsp;=&nbsp;function&nbsp;(e)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;imageExists(e.target.result,&nbsp;function(exists){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(exists)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Do&nbsp;something&nbsp;with&nbsp;the&nbsp;image&nbsp;file..&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;else&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;different&nbsp;file&nbsp;format &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;});};reader.readAsDataURL(input.files[0]);function&nbsp;imageExists(url,&nbsp;callback)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;img&nbsp;=&nbsp;new&nbsp;Image(); &nbsp;&nbsp;&nbsp;&nbsp;img.onload&nbsp;=&nbsp;function()&nbsp;{&nbsp;callback(true);&nbsp;}; &nbsp;&nbsp;&nbsp;&nbsp;img.onerror&nbsp;=&nbsp;function()&nbsp;{&nbsp;callback(false);&nbsp;}; &nbsp;&nbsp;&nbsp;&nbsp;img.src&nbsp;=&nbsp;url;}