使用Javascript讀取客戶端文本文件

Question

我想讀取一個文件（在客戶端）並獲取數組中的內容。 它只是一個文件。 我有以下，它不起作用。 'query_list'是textarea，我想在其中顯示文件的內容。

<input type="file" id="file" name="file" enctype="multipart/form-data"/>

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

       function readFile (evt) {
           var files = evt.target.files;
           var file = files[0];

          var fh = fopen(file, 0);
          var str = "";
          document.getElementById('query_list').textContent = str;
          if(fh!=-1) {
             length = flength(fh);        
             str = fread(fh, length);     
             fclose(fh);                   
           } 
           document.getElementById('query_list').textContent = str;
        }
      </script>

我該怎么辦呢？ 最終我想循環遍歷數組並運行一些SQL查詢。

Answer 1

如果您想使用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對象（對於您的網站），它應該工作。

Answer 2

有一種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);
});

Answer 3

我在那里工作，但仍然想貢獻，因為它運作良好：你可以使用filepicker.io read api做到這一點。 您可以傳入一個dom元素並獲取內容，用於文本或二進制數據，即使在IE8 +中也是如此

Answer 4

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

<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解決方案。