如果要使用HTML5 的 FileReader读取客户端上的文件，则必须使用 Firefox、Chrome 或 IE 10+。如果是这样，以下示例将读取客户端上的文本文件。

您的示例尝试使用我从未听说过的 fopen（在客户端上）

http://jsfiddle.net/k3j48zmt/

   document.getElementById('file').addEventListener('change', readFile, false);

   function readFile (evt) {
       var files = evt.target.files;
       var file = files[0];           
       var reader = new FileReader();
       reader.onload = function(event) {
         console.log(event.target.result);            
       }
       reader.readAsText(file)
    }

对于 IE<10 支持，您需要考虑使用 ActiveX 对象，例如 ADO.Stream Scripting.FileSystemObject http://msdn.microsoft.com/en-us/library/2z9ffy99(v=vs.85).aspx但您会遇到安全问题。如果您运行 IE 允许所有 ActiveX 对象（对于您的网站），它应该可以工作。

有HTML5 File API 之类的东西可以访问用户选择的本地文件，而无需将它们上传到任何地方。

这是一个相当新的功能，但被大多数现代浏览器支持。

我强烈建议您查看这篇很棒的文章，了解如何使用它。

这有一个问题，您无法读取大文件（~400 MB 或更大），因为直接的 FileAPI 函数试图将整个文件加载到内存中。

如果您需要阅读大文件，或在那里搜索某些内容，或按行索引导航，请检查我的LineNavigator，它允许您阅读、导航和搜索任何大小的文件。在 jsFiddle 中试试吧！它非常易于使用：

var navigator = new FileNavigator(file);    

navigator.readSomeLines(0, function linesReadHandler(err, index, lines, eof, progress) {    
    // Some error
    if (err) return;

    // Process this line bucket
    for (var i = 0; i < lines.length; i++) {
        var line = lines[i]; 
        // Do something with it
    }

    // End of file
    if (eof) return;

    // Continue reading
    navigator.readSomeLines(index + lines.length, linesReadHandler);
});

好吧，我得到了答案，但它不同：

<input type="file" id="fi" />
<button onclick="handleFile(); return false;">click</button>

function handleFile() {
    var preview = document.getElementById('prv')
    var file = document.getElementById('fi').files[0];
    var div = document.body.appendChild(document.createElement("div"));
    div.innerHTML = file.getAsText("utf-8");
}

这将适用于 FF 3.5 - 3.6，仅此而已。FF 4 和 WebKit 您需要使用 Juan Mendes 提到的 FileReader。

对于 IE，您可能会找到 Flash 解决方案。

我在那里工作，但仍然想做出贡献，因为它运行良好：您可以使用filepicker.io read api来做到这一点。即使在 IE8+ 中，您也可以传入一个 dom 元素并取回内容，对于文本或二进制数据