整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
asyread是我看了遨游瀏覽器自帶的“閱讀模式”后，感覺這個功能挺好的，所以想在自己的博客上添加這個功能。于是就在自己的博客上完成了這個功能。這時候一個朋友感覺這個效果也不錯，于是就問我要了源碼。我想可不可以做成像網上的其他jQuery插件一樣，用戶可以把這個功能當成一個jQuery插件，用的時候只需要引入js和css等，然后自己設置相關的代碼呢？于是我就開始著手將其改成一個jQuery插件的形式。
因為是第一次寫jQuery插件，可能很多地方都不符合jQuery插件的規范，希望各位朋友想我多多提出寶貴的建議，讓這個插件更加完善。最后因為這個插件是為了方便瀏覽者閱讀的于是就給他起了個名字叫做easyread
<link rel="stylesheet" type="text/css" href="../style.css">
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/jquery.easyread.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".read").easyread({
titleClass:"article_content",
contentClass:"article_title"
});
});
</script>參數詳解
titleClass：標題所在容器的類名 contentClass：正文所在容器的類名
地址：https://www.dpaoz.com/81
維網和其它網絡類型最大的區別就是它在網頁上可呈現豐富多彩的色彩和圖像，還可以播放音頻、視頻，及把圖像作為鏈接使用。
網絡上流行的圖片格式主要有jpg、jpeg、png、gif等，以下是這幾種格式的介紹。
1、gif格式
gif采用LZW壓縮，是以壓縮相同顏色色塊來減少圖像大小。由于LZW壓縮不會造成任何品質的損失，且壓縮率高，支持動畫效果，很適合互聯網平臺，但是它只支持256種顏色。
2、jpg或jpeg格式
以JPEG有損壓縮圖片，通常用來保存超過256色的圖片格式。JPEG壓縮過程會對一些圖像數據造成損失，這部分損失不影響圖片顯示，一般人眼是看不出來差異的。損失數據越多，圖片就越不清晰。
3、png格式
png是一種非破壞性的網頁圖像文件格式，它以最小的方式壓縮圖片且不造成圖片數據損失。它不僅支持像gif大部分優點，還支持48 bit的色彩，跨平臺的圖像亮度控制，更多層的透明度設置。
網頁中通過<img>標簽插入圖片，語法如下：
<img src="圖片路徑" alt="替換文本" />具體示例：
<!DOCTYPE HTML>
<html>
<body>
<p>
一幅圖像：
<img src="/i/eg_mouse.jpg" width="128" height="128" />
</p>
<p>
一幅動畫圖像：
<img src="/i/eg_cute.gif" width="50" height="50" />
</p>
<p>請注意，插入動畫圖像的語法與插入普通圖像的語法沒有區別。</p>
</body>
</html>效果如下：
替換文本屬性（Alt）
alt 屬性用來為圖像定義一串預備的可替換的文本。
<img src="boat.gif" alt="Big Boat">當瀏覽器無法載入圖像時，替換文本屬性可告訴讀者他們失去的信息。此時，瀏覽器將顯示這個替代性的文本而不是圖像。為頁面上的圖像都加上替換文本屬性是個好習慣，這樣有助于更好地顯示信息，并且對于那些使用純文本瀏覽器的人來說是非常有用的。
圖像寬度和高度屬性
如下代碼，在網頁中插入一個寬度和高度都是300像素的圖片。
<img src="/i/ct_netscape.jpg" width="300px" height="300px" />圖片超鏈接
如下代碼，在網頁中對一個圖片進行超鏈接設置，點擊這張圖片就會跳轉到其它頁面。
<a href="頁面路徑"><img src="/i/ct_netscape.jpg" /></a>除了對整個圖片進行超鏈接設置外，還可以將圖像劃分成不同區域進行鏈接設置，比如一張地圖中給每個省份圖形進行超鏈接。
圖像熱區鏈接，使用usemap 屬性通過#name指定到名叫name的map元素上，map定義了每個熱區點擊區域形狀、大小、坐標等。
area標簽的 shape 屬性有三種，rect 方形，circle 圓形，poly 多邊形。coords 屬性定義坐標點位置，相對于圖片左上角位置。
示例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool(w3cschool.cn)</title>
</head>
<body>
<p>點擊太陽或其他行星，注意變化：</p>
<img src="/statics/images/course/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" target="_blank" alt="Sun" href="/statics/images/course/sun.gif">
<area shape="circle" coords="90,58,3" target="_blank" alt="Mercury" href="/statics/images/course/merglobe.gif">
<area shape="circle" coords="124,58,8" target="_blank" alt="Venus" href="/statics/images/course/venglobe.gif">
</map>
</body>
</html>效果可參考 https://www.w3cschool.cn/html5/html5-img.html 這里。
可以看到鼠標在圖片上點擊小行星會打開對應的圖片。
到此網頁中使用圖片已經大體介紹了，自己親手寫下，會加深印象，感謝關注。
上篇：前端入門——html 超鏈接
下篇：前端入門——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事件。」
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
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
