如何在 Angular JS 中检查上传文件的类型？答案

【问题标题】：How to check type of uploading file in Angular JS?如何在 Angular JS 中检查上传文件的类型？
【发布时间】：2015-07-21 01:47:55
【问题描述】：

我在 Angular JS 中使用库 Angular File Uploader。这里是filters，允许将文件类型设置为上传。我这样做是这样的：

uploader.filters.push({
    name: 'imageFilter',
    fn: function (item /*{File|FileLikeObject}*/, options) {
    var type = '|' + item.type.slice(item.type.lastIndexOf('/') + 1) + '|';
         return '|doc|txt|docx|xml|pdf|djvu'.indexOf(type) !== -1;
   }
});

问题是用户可以更改扩展文件，例如将*.exe更改为*.pdf，然后Angular上传器会将文件添加到队列上传。

以及如何在模板中显示 PDF 和 txt 文件的信息？

【问题讨论】：

没有真正的方法可以在客户端验证文件，因为用户可以通过禁用 JavaScript、从输入中删除 accept 属性等轻松“欺骗”系统。跨度>
你能提出什么建议？
我会有一个 PHP 后端文件验证 (stackoverflow.com/questions/310714/…)，并让 accept 属性只接受您想要的文件类型 (w3schools.com/tags/att_input_accept.asp)。
人们仍然（愿意）使用 PHP？

标签： javascript angularjs

【解决方案1】：

您已经确定了将文件上传到服务器的主要问题之一（恭喜！）:)

除了开玩笑和轻率之外，我还没有听说过在上传之前使用 AngularJS 验证文件的优雅或可靠的方法（如您所知，AngularJS 受到 JavaScript 原生提供的 API 的限制，因为 AngularJS 是 JavaScript框架。）

正如this answer to "How to check file MIME type with javascript before upload?" 指出的，您可以在上传之前在客户端检查文件的 MIME 类型。

但是，由于多种原因，在客户端检查文件存在限制，包括：

用户可以更改有关文件的信息（例如，正如您所指出的，扩展名）
某些浏览器对 API 的支持有限，这些 API 可能使您能够首先在客户端检查文件

这就是为什么最好的办法是检查服务器上的文件。

一种方法（可能是许多方法之一）是使用 PHP，并执行类似于this answer to "How to check file types of uploaded files in PHP?" 建议的方法，即：

看看mime_content_type 或Fileinfo。这些是内置的 PHP 通过查看内容来确定文件类型的命令的文件。还要查看上面两页的cmets，有其他一些不错的建议。

就我个人而言，我很幸运地使用了一些本质上是 system("file -bi $uploadedfile")，但我不确定这是否是最好的方法。

依靠服务器（而不是客户端）检查文件的优势是您只受到服务器可以使用的 API 的限制（客户端用户无法控制）。

【讨论】：