Html Chrome 文件阅读器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4100927/
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
Chrome FileReader
提问by Drew LeSueur
Can someone give me an example of using the FileReader API go get contents of a file in chrome?
有人能给我一个使用 FileReader API 的例子，在 chrome 中获取文件的内容吗？
It seems to be returning undefinedfor me.
它似乎正在undefined为我返回。
<!doctype html>
<html>
<script>
function handle_files(files) {
console.log(files)
reader = new FileReader()
ret = []
for (i = 0; i < files.length; i++) {
file = files[i]
console.log(file)
text = reader.readAsText(file) //readAsdataURL
console.log(text) //undefined
ret.push(text)
}
console.log(ret) // [undefined]
}
</script>
<body>
FileReader Test
<input type="file" onchange="handle_files(this.files)">
</body>
</html>
回答by Drew LeSueur
My problem was that I assumed FileReader was sychronous. Here is the right way to do it. If you are on chrome, this code has to be running on a server (localhost or on a site). It won't work with a local file.
我的问题是我认为 FileReader 是同步的。这是正确的方法。如果您使用的是 chrome，则此代码必须在服务器（本地主机或站点）上运行。它不适用于本地文件。
<!doctype html>
<html>
<script>
function handle_files(files) {
for (i = 0; i < files.length; i++) {
file = files[i]
console.log(file)
var reader = new FileReader()
ret = []
reader.onload = function(e) {
console.log(e.target.result)
}
reader.onerror = function(stuff) {
console.log("error", stuff)
console.log (stuff.getMessage())
}
reader.readAsText(file) //readAsdataURL
}
}
</script>
<body>
FileReader that works!
<input type="file" multiple onchange="handle_files(this.files)">
</body>
</html>
回答by Sampson
The File API FileReader object operates the same way in Chrome as it does in FireFox, Opera, or Internet Explorer 10 (Yup, works in IE).
File API FileReader 对象在 Chrome 中的运行方式与在 FireFox、Opera 或 Internet Explorer 10 中的运行方式相同（是的，可在 IE 中运行）。
Simple Example
简单示例
You start by declaring a new instance of the reader:
首先声明一个新的阅读器实例：
var reader = new FileReader();
Define your callbacks for its various events:
为其各种事件定义回调：
reader.onloadend = function( ){
document.body.style.backgroundImage = "url(" + this.result + ")";
}
And then pass it something to read:
然后传递一些东西来阅读：
reader.readAsDataURL( file );
Fiddle: http://jsfiddle.net/jonathansampson/K3A9r/
小提琴：http: //jsfiddle.net/jonathansampson/K3A9r/
Handling Multiple Files
处理多个文件
When you're working with multiple files, things are a bit different. While it's clear we need to cycle over the resulting FileList, we'll also need to use a closure to prevent file data from getting tampered with over numerous iterations:
当您处理多个文件时，情况会有所不同。虽然很明显我们需要循环遍历生成的 FileList，但我们还需要使用闭包来防止文件数据在多次迭代中被篡改：
// Continue only if we have proper support
if ( window.FileReader ) {
// Provide our logic upon the change even of our input
document.getElementById("collection").onchange = function(){
// Couple variables for handling each file
var counter = -1, file;
// Cycle over all files
while ( file = this.files[ ++counter ] ) {
// Create a reader for this particular file
var reader = new FileReader();
// Respond to the onloadend event of the reader
reader.onloadend = (function(file){
return function(){
var image = new Image();
image.height = 100;
image.title = file.name;
image.src = /^image/.test(file.type) ? this.result : "t9QlH.png";
document.body.appendChild( image );
}
})(file);
// Begin reading data for this file
reader.readAsDataURL( file );
}
}
}?
Fiddle: http://jsfiddle.net/jonathansampson/jPTV3/
小提琴：http: //jsfiddle.net/jonathansampson/jPTV3/
Feature Detection
特征检测
Although FileReader is available in nearly all modern browsers, you still want to be sure you don't cause any ruckus for users on older browsers. Prior to using the FileReader, be sure to check the window object for its presence:
尽管 FileReader 几乎在所有现代浏览器中都可用，但您仍然希望确保不会对旧浏览器上的用户造成任何骚动。在使用 FileReader 之前，一定要检查 window 对象是否存在：
if ( window.FileReader ) {
// Safe to use FileReader
}
Running Locally, From Chrome
在本地运行，从 Chrome
I should note that running this in a file:/// path in Chrome will result in a broken experience. By default, current versions of Chrome don't permit file:/// pages to access other files. You can change this behavior loading Chrome with the --allow-file-access-from-filesflag.
我应该注意，在 Chrome 中的 file:/// 路径中运行它会导致体验不佳。默认情况下，当前版本的 Chrome 不允许 file:/// 页面访问其他文件。您可以使用--allow-file-access-from-files标志更改加载 Chrome 的此行为。
Note, this method will only permit file access for files on the instance of the browser it was opened with. If you want this to be the case for all browser instances into the future, you could modify the shortcut from your desktop. Simply right-click the Chrome shortcut, and go to properties. Next, add the flag to the end of the target.
请注意，此方法仅允许对打开它的浏览器实例上的文件进行文件访问。如果您希望将来所有浏览器实例都如此，您可以从桌面修改快捷方式。只需右键单击 Chrome 快捷方式，然后转到属性。接下来，将标志添加到目标的末尾。
