您现在的位置：程式碼之家 >> 編程語言 > >> 更多程式語言 >> 程式設計綜合問答

IE 瀏覽器不支持 readAsBinaryString 解決方案：FileReader 兼容性處理與 Polyfill 策略

編輯：程式設計綜合問答

問題根因

`FileReader.readAsBinaryString()` **非標準方法**，僅 Firefox/Chrome 早期實現。IE 全系列、Edge (Legacy)、Safari 早期版本**均不支持**。標準替代方案是 `readAsArrayBuffer()` + `Uint8Array` 處理二進制數據。

標準化替代代碼（推薦）

function readFileAsBinaryString(file, callback) {
    const reader = new FileReader();
    reader.onload = function(e) {
        const arrayBuffer = e.target.result;
        const bytes = new Uint8Array(arrayBuffer);
        // 轉為二進制字符串（每字節一字符，code point 0-255）
        let binaryStr = '';
        for (let i = 0; i < bytes.length; i++) {
            binaryStr += String.fromCharCode(bytes[i]);
        }
        callback(binaryStr);
    };
    reader.readAsArrayBuffer(file); // 標準方法，全瀏覽器支持
}

如果必須保留 `readAsBinaryString` API（舊代碼遷移）

Polyfill 方案

if (!FileReader.prototype.readAsBinaryString) {
    FileReader.prototype.readAsBinaryString = function(file) {
        const self = this;
        const reader = new FileReader();
        reader.onload = function(e) {
            const arr = new Uint8Array(e.target.result);
            let binary = '';
            for (let i = 0; i < arr.length; i++) binary += String.fromCharCode(arr[i]);
            // 模擬原生事件
            const event = new Event('load');
            event.target = { result: binary };
            self.onload?.(event);
        };
        reader.readAsArrayBuffer(file);
    };
}

關於 `` 的誤區

你貼的代碼：

<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />

**無效原因**：

**只能有一個** `X-UA-Compatible`，後者覆蓋前者
**`Chrome=1` 需用戶安裝已停止維護的 Chrome Frame 插件**，現代環境無效
**`IE=8` 強制使用 IE8 引擎**，反而會失去 IE9+ 對 HTML5/File API 的部分支持

**正確寫法**（放在 `` 首位）：

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

含義：強制 IE 使用**當前安裝版本的最高標準模式**（IE11 即 Edge 模式），而非兼容模式。

完整兼容策略清單

需求	現代標準方案	IE9+ 支持	IE8- 支持
讀取文件文本	`readAsText(file, 'utf-8')`	✅	✅
讀取文件二進制	`readAsArrayBuffer()` + `Uint8Array`	✅	❌ (無 FileReader)
上傳文件	`FormData` + `fetch`/`XMLHttpRequest`	✅	❌ (需 FormData Polyfill 或 Flash)
拖拽上傳	Drag & Drop API	✅	❌

生產建議

**放棄 IE8-**：微軟 2016 年停止支持，流量 < 0.5%
**IE9-11 使用 Polyfill**：引入 `babel-polyfill` / `core-js` 統一補齊 ES5+ API
**文件處理統一封裝**：`FileUtil.readAsArrayBuffer(file).then(buffer => ...)` 隔離兼容代碼

**條件編譯加載 Polyfill**：

<!--[if lte IE 11]>
<script src="polyfill.min.js"></script>
<![endif]-->

總結

IE 不支持 `readAsBinaryString` 是**標準化進程的必然結果**。請直接使用 **`readAsArrayBuffer()` + `Uint8Array`** 處理二進制文件，配合 `core-js` Polyfill 覆蓋 IE9-11，徹底拋棄非標準 API 與失效的 `X-UA-Compatible` 臭蟲配置。現代 Web 開發，**擁抱標準、優雅降級、條件編譯** 是正道。