如何在Angular JS中檢查上傳文件的類型？

Question

我在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文件？

Answer 1

您已經確定了將文件上傳到服務器的主要問題之一（恭喜！）:)

除了所有的開玩笑和輕浮之外，我還沒有聽說過在上傳之前用AngularJS驗證文件的優雅或確定的方法（如你所知，AngularJS受到JavaScript本身提供的API的限制，因為AngularJS是一個JavaScript框架。）

正如本回答“如何在上傳之前使用javascript檢查文件MIME類型？” 指出，您可以在上傳之前檢查客戶端上文件的MIME類型。

但是，由於多種原因檢查客戶端上的文件存在限制，包括：

1. 用戶可以更改有關文件的信息（例如，如您所指出的，擴展名稱）
2. 某些瀏覽器對API的支持有限，這些API可能使您能夠首先在客戶端上檢查文件

這就是為什么你最好的選擇是檢查服務器上的文件 。

一種方法（在可能的很多方法中）是使用PHP，並做一些類似於“如何檢查PHP中上傳文件的文件類型”的回答？ 建議，這是：

看一下mime_content_type或Fileinfo 。 這些是內置的PHP命令，用於通過查看文件的內容來確定文件的類型。 另外還要檢查上面兩頁的評論，還有一些其他好的建議。

就個人而言，我運氣好的是使用基本上是系統的東西（“file -bi $ uploadedfile”），但我不確定這是不是最好的方法。

依靠服務器 （而不是客戶端）來檢查文件的優點是，您只受服務器可以使用的API（客戶端用戶無法控制）的限制。

Answer 2

從文件閱讀器獲取文件類型可能很棘手。 用戶可以將文本文件擴展名更改為png，jpeg等。通過javascript，您可以將文件讀取器結果加載到Image源，如果source是圖像，則使用onload或onerror回調。

使用示例： https ： //stackoverflow.com/a/37341964/2807165