javascript 如何获得 HTML5 的 window.fileReader API 的跨浏览器兼容性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20541611/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get Cross Browser Compatibilty for window.fileReader API of HTML5
提问by Beutiful World
Hi Html5 developers and HTML4 developers too...
嗨 Html5 开发人员和 HTML4 开发人员也...
I want to know whether is there any way to support window.fileReader API of html5 in IE8 and above.
我想知道在IE8及以上有没有办法支持html5的window.fileReader API。
the code below :
下面的代码：
if(window.fileReader){
alert("supported"); // in html5 works and fires alert but not in IE8
}
Actually, i want to read the contents of file before submitting.
实际上，我想在提交之前阅读文件的内容。
- Can i use some condition, if window.fileReader is supported then
follow 'A' line of code using HTML5 , else if window.fileReader is not supported then
use some other thing...to read the file - I also want to know the way to read the file contents without using
HTML5 fileAPI... but not using ActiveXObject.
- 我可以使用某些条件，如果支持 window.fileReader 然后
使用 HTML5 遵循“A”行代码，否则如果不支持 window.fileReader 则
使用其他一些东西......读取文件 - 我还想知道如何在不使用
HTML5 fileAPI 的情况下读取文件内容......但不使用 ActiveXObject。
Waiting for the response..
等待回应。。
回答by Don Rhummy
There are multiple pieces that you'll need to check the support of:
您需要检查多个部分的支持：
//Full File API support.
if ( window.FileReader && window.File && window.FileList && window.Blob )
{
//Supported
}
else alert( "Not supported" );
Your second requirement:
你的第二个要求：
I also want to know the way to read the file contents without using HTML5 fileAPI... but not using ActiveXObject.
我还想知道如何在不使用 HTML5 fileAPI 的情况下读取文件内容......但不使用 ActiveXObject。
What you could do is this:
你可以做的是：
- Have an iframe (you'll be posting to this)
- Have an input of type "file"
- When the user selects the local file, you use javascript to post it to the iframe (e.g.
document.getElementById( "myForm" ).target = "myIframe"; document.getElementById( "myForm" ).submit(); - The iframe's POSTed page (Could be PHP) reads the uploaded file contents and does a callback to the parent page (e.g.
<script>window.parent.someCallbackFunction( theFileCOntents );</script>)
- 有一个 iframe（你会发布到这个）
- 有一个“文件”类型的输入
- 当用户选择本地文件时，您使用 javascript 将其发布到 iframe（例如
document.getElementById( "myForm" ).target = "myIframe"; document.getElementById( "myForm" ).submit(); - iframe 的 POSTed 页面（可能是 PHP）读取上传的文件内容并回调到父页面（例如
<script>window.parent.someCallbackFunction( theFileCOntents );</script>）
回答by joseeight
You can check features with simple if logic and wrap your functionality there.
您可以使用简单的 if 逻辑检查功能并将您的功能包装在那里。
if ('FileReader' in window) {
// Do something with FileReader since it's supported
} else {
// Do something with your polyfill solution
}
You can try a polyfill solutions like this one (works in IE8): https://github.com/Jahdrien/FileReader
您可以尝试像这样的 polyfill 解决方案（适用于 IE8）：https: //github.com/Jahdrien/FileReader
回答by CodZilla
You can always use a try-catch to check the FileReader() is supported in a browser.
您始终可以使用 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
}
