如何打開本地文本文件並在瀏覽器中顯示內容？

我打算在我的網頁上有一個鏈接，它會打開一個本地文本文件並顯示它的內容。這是我到目前爲止已經試過：如何打開本地文本文件並在瀏覽器中顯示內容？

<a href='#' onclick='readTextFile("file:///F:/folder1/abc.txt")' title='Summary'><h3>Summary</h3></a> 

function readTextFile(file) 
{ 
    var rawFile = new XMLHttpRequest(); 
    rawFile.open("GET", file, false); 
    rawFile.onreadystatechange = function() 
    { 
     if(rawFile.readyState === 4) 
     { 
      if(rawFile.status === 200 || rawFile.status == 0) 
      { 
       var allText = rawFile.responseText; 
       alert(allText); 
      } 
     } 
    } 
    rawFile.send(null); 
}

這是我收到的錯誤：

的XMLHttpRequest無法加載文件：/// F：/folder1/abc.txt。交叉源請求僅支持協議方案：http，data，chrome， chrome-extension，https，chrome-extension-resource。

我的網頁在本地服務器上本地運行。

它甚至可以打開和讀取本地文件？好像瀏覽器應該不允許的東西。

來源

2017-03-07 karansabhani

oooh，no ...只是重新閱讀這個問題......你不能這樣做，哦，上帝請讓它在任何瀏覽器中永遠不可行！ –

在大多數瀏覽器中，只有頁面所在文件夾或子文件夾中的資源纔有可能。 –

@Pekka웃 - 他想從'http：//'開啓'file：///'！ –

新的答案：

它仍然是可能的。

使用Chrome
安裝tampermonkey擴展
選中該複選框，使其可以訪問本地文件。
添加腳本到它如下：

// ==UserScript== 
// @name   read localfile 
// @namespace http://tampermonkey.net/ 
// @version  0.1 
// @description read localfile 
// @author  blackmiaool 
// @match  http://stackoverflow.com/* 
// @match  https://stackoverflow.com/* 
// @grant  GM_getResourceText 
// @resource  b file://C:\Users\blackmiaool\the-path-of-the-file 
// ==/UserScript== 

(function() { 
    'use strict'; 
    var a=GM_getResourceText("b"); 
    console.log("The file's content is ",a); 
})();

記住要更正文件路徑，並測試其在此頁上。

老答案：

當然這是可能的。如果您的index.html文件位於「/some-path/index.html」處，請將您的abc.txt放在「/some-path/abc.txt」處。然後將「file：/// F：/folder1/abc.txt」更改爲「./abc.txt」。

來源

2017-03-07 12:32:02 blackmiaool

看到他說的地方*網頁在本地服務器上本地運行*** –

@JaromandaX我認爲本地服務器意味着服務器運行在他自己的電腦上。 – blackmiaool

我認爲本地服務器意味着本地服務器 –

簡單地說：「不，您無法讀取本地部署在本機上的任何文件。」爲了訪問任何資源，您必須擁有可用的資源。您的當前頁面來自哪裏。

來源

2017-03-07 12:36:21

該文件需要在您的Web應用程序中鏈接到它。允許javascript在應用程序外部訪問您的計算機是一種安全風險，不允許。後臺進程可以讀取文件，然後給出結果，但不能直接從JavaScript讀取到計算機上的文件

來源

2017-03-07 13:05:47

對於符合HTML5的網站，您可以使用HTML5提供的新API。

HTML5 FileReader接口可用於通過熟悉的JavaScript事件處理異步讀取文件。它提供了以下功能：

readAsText
readAsBinaryString
readAsDataURL
readAsArrayBuffer

請點擊此treehouse blog（包括演示過），也this供大家參考。

來源

2017-03-07 13:08:25

如何打開本地文本文件並在瀏覽器中顯示內容？

回答

相關問題