avaScript 中有一個重要屬性document.referrer，它可以從當前頁面獲取到前一個來源頁面的信息。這個屬性通常包含一個字符串，表示發送請求的頁面的 URL。

運用好document.referrer 屬性，可以在不少方面發揮很大作用：

1. 流量來源分析：document.referrer 可以幫助開發者了解用戶是從哪個頁面或網站跳轉到當前頁面的。這對于分析流量來源、用戶行為模式以及識別有效的營銷渠道（如廣告、社交媒體鏈接等）非常有用。
2. 頁面鏈接分析：如果網站有多個頁面，根據document.referrer 可以了解用戶是從哪個頁面跳轉到當前頁面的。這對于分析內部鏈接的有效性、用戶偏好以及網站結構的優化非常有價值。
3. 監控惡意流量和機器人：雖然 document.referrer 可以被偽造或禁用，但仍然可以作為檢測惡意流量或機器人的一種方法。例如，可以檢查 document.referrer 是否為空或包含特定模式，以識別潛在的爬蟲或惡意請求。

注意1：document.referrer 的值可能因瀏覽器設置、隱私插件、HTTPS 到 HTTP 的跳轉等因素而有所不同。一些瀏覽器或用戶可能選擇不發送 referrer 信息，或者發送一個修改過的、不完全的 URL。因此，依賴 document.referrer 進行關鍵業務邏輯決策時，需要考慮到這些限制和不確定性。

注意2：雖然 document.referrer 和 document.referer 在許多瀏覽器中都可以使用，但 document.referrer 是更標準和推薦使用的屬性。因此，在編寫代碼時，建議使用 document.referrer 以確?？鐬g覽器的兼容性和一致性。

document.addEventListener("copy",function(e){
//取消默認事件，才能修改復制的值
e.preventDefault();
//復制的內容
var copyTxt=`${window.getSelection(0).toString()}
\n作者：科技小鍋蓋
\n鏈接:${window.location.href}
\n著作權歸*科技小鍋蓋*所有，任何形式的轉載都請聯系QQ:1540217035獲得授權并注明出處。`
if(e.clipboardData) {
e.clipboardData.setData('text/plain', copyTxt);
}
else if(window.clipboardData){
return window.clipboardData.setData("text", copyTxt);
}
});

是科技小鍋蓋正在使用的方法，很好用，兼容各種瀏覽器！

作者：科技小鍋蓋

鏈接:https://www.xiaoguogai.cn/detail/id/40.html

著作權歸*科技小鍋蓋*所有，任何形式的轉載都請注明出處。

于安全和隱私的原因，web 應用程序不能直接訪問用戶設備上的文件。如果需要讀取一個或多個本地文件，可以通過使用input file和FileReader來實現。在這篇文章中，我們將通過一些例子來看看它是如何工作的。

文件操作的流程

獲取文件

由于瀏覽器中的 JS 無法從用戶的設備訪問本地文件，我們需要為用戶提供一種方法來選擇一個或多個文件供我們使用。這可以通過文件選擇器<input type='fule' />來完成。

<input type="file" id="fileInput">

如果想允選擇多個文件，可以添加multiple屬性:

<input type="file" id="fileInput" multiple>

我們可以通過change事件來監聽文件的選擇，也可以添加另一個 UI 元素讓用戶顯式地開始對所選文件的處理。

input file 具有一個files屬性，該屬性是File對象的列表（可能有多個選擇的文件）。

File對象如下所示：

讀取文件

讀取文件，主要使用的是[FileReader][1]類。

「該對象擁有的屬性：」

「FileReader.error」 ：只讀，一個DOMException，表示在讀取文件時發生的錯誤 。

「FileReader.readyState」：只讀 表示 FileReader 狀態的數字。取值如下：

常量名值描述EMPTY0還沒有加載任何數據LOADING1數據正在被加載DONE2已完成全部的讀取請求

「FileReader.result」：只讀，文件的內容。該屬性僅在讀取操作完成后才有效，數據的格式取決于使用哪個方法來啟動讀取操作。

「該對象擁有的方法：」

readAsText(file, encoding)：以純文本形式讀取文件，讀取到的文本保存在result屬性中。第二個參數代表編碼格式。

readAsDataUrl(file)：讀取文件并且將文件以數據URI的形式保存在result屬性中。

readAsBinaryString(file)：讀取文件并且把文件以字符串保存在result屬性中。

readAsArrayBuffer(file)：讀取文件并且將一個包含文件內容的ArrayBuffer保存咋result屬性中。

FileReader.abort()：中止讀取操作。在返回時，readyState屬性為DONE。

「文件讀取的過程是異步操作，在這個過程中提供了三個事件：progress、error、load事件?！?/strong>

progress：每隔50ms左右，會觸發一次progress事件。

error：在無法讀取到文件信息的條件下觸發。

load：在成功加載后就會觸發。

在下面的示例中，我們將使用readAsText和readAsDataURL方法來顯示文本和圖像文件的內容。

例一：讀取文本文件

為了將文件內容顯示為文本，change需要重寫一下：

首先，我們要確保有一個可以讀取的文件。如果用戶取消或以其他方式關閉文件選擇對話框而不選擇文件，我們就沒有什么要讀取和退出函數。

然后我們繼續創建一個FileReader。reader的工作是異步的，以避免阻塞主線程和 UI 更新，這在讀取大文件(如視頻)時非常重要。

reader發出一個'load'事件(例如，類似于Image對象)，告訴我們的文件已經讀取完畢。

reader將文件內容保存在其result屬性中。此屬性中的數據取決于我們使用的讀取文件的方法。在我們的示例中，我們使用readAsText方法讀取文件，因此result將是一個文本字符串。

例二：顯示本地選擇的圖片

如果我們想要顯示圖像，將文件讀取為字符串并不是很有用。FileReader有一個readAsDataURL方法，可以將文件讀入一個編碼的字符串，該字符串可以用作<img>元素的源。本例的代碼與前面的代碼基本相同，區別是我們使用readAsDataURL讀取文件并將結果顯示為圖像:

總結

1）由于安全和隱私的原因，JavaScript 不能直接訪問本地文件。

2）可以通過 input 類型為 file 來選擇文件，并對文件進行處理。

3） file input 具有帶有所選文件的files屬性。

4） 我們可以使用FileReader來訪問所選文件的內容。

作者: Martin Splitt 譯者：前端小智 來源：dev

原文：https://dev.to/g33konaut/reading-local-files-with-javascript-25hn