如何獲取HTML5的window.fileReader API的Cross Browser兼容性

Question

嗨Html5開發人員和HTML4開發人員......

我想知道是否有任何方法支持IE8及以上版本的html5的window.fileReader API。

代碼如下：

if(window.fileReader){
  alert("supported"); // in html5 works and fires alert but not in IE8 
}

實際上，我想在提交之前閱讀文件的內容。

• 如果支持window.fileReader，我可以使用某些條件嗎？
  使用HTML5跟隨'A'代碼行，否則如果不支持window.fileReader
  使用其他東西......來讀取文件
• 我也想知道如何在不使用的情況下讀取文件內容
  HTML5 fileAPI ...但不使用ActiveXObject。

等待回復..

Answer 1

您需要檢查以下內容的多個部分：

//Full File API support.
if ( window.FileReader && window.File && window.FileList && window.Blob )
{
    //Supported
}

else alert( "Not supported" );

你的第二個要求：

我也想知道在不使用HTML5 fileAPI但不使用ActiveXObject的情況下讀取文件內容的方法。

你能做的是：

1. 有一個iframe（你會發布到這個）
2. 輸入“文件”類型
3. 當用戶選擇本地文件時，您使用javascript將其發布到iframe（例如document.getElementById( "myForm" ).target = "myIframe"; document.getElementById( "myForm" ).submit();
4. iframe的POSTed頁面（可能是PHP）讀取上傳的文件內容並對父頁面進行回調（例如<script>window.parent.someCallbackFunction( theFileCOntents );</script> ）

Answer 2

您可以使用簡單的if邏輯檢查功能並將功能包裝在那里。

if ('FileReader' in window) {
  // Do something with FileReader since it's supported
} else {
  // Do something with your polyfill solution
}

您可以嘗試像這樣的polyfill解決方案（適用於IE8）： https ： //github.com/Jahdrien/FileReader

Answer 3

您始終可以使用try-catch檢查瀏覽器是否支持FileReader（）。

try {
    var reader = new FileReader();
    //do something
}
catch(e) {
    alert("Error: seems File API is not supported on your browser");
    //do something
}