整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
在 HTML 文檔中 <input type="file"> 標簽每出現一次，一個 FileUpload 對象就會被創建。
該元素包含一個文本輸入字段，用來輸入文件名，還有一個按鈕，用來打開文件選擇對話框以便圖形化選擇文件。
該元素的 value 屬性保存了用戶指定的文件的名稱，但是當包含一個 file-upload 元素的表單被提交的時候，瀏覽器會向服務器發送選中的文件的內容而不僅僅是發送文件名。
當用戶選擇或編輯一個文件名，file-upload 元素觸發 onchange 事件句柄。
看個簡單例子：
[html]view plaincopy
<!--?oscar999??-->??<!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.01?Transitional//EN">??<html>????<head>????<meta?http-equiv="content-type"?content="text/html;?charset=utf-8">????<meta?name="author"?content="oscar999">????<title></title>????<script>????function??handleFiles(files)????{??????if(files.length)??????{?????????var?file?=?files[0];?????????var?reader?=?new?FileReader();?????????reader.onload?=?function()?????????{?????????????document.getElementById("filecontent").innerHTML?=?this.result;?????????};?????????reader.readAsText(file);??????}????}????</script>????</head>????<body>????<input?type="file"?id="file"?onchange="handleFiles(this.files)"/>????<div?id="filecontent"></div>????</body>??</html>??這里讀取一個文件， 顯示在div 中。
(在IE8 中 無效， this.files 無法讀取文件。這個屬于HTML5 的特性)
當選擇了一個文件時，就會把包含這個文件的列表（一個FileList對象）作為參數傳給handleFiles()函數了。這個FileList對象類似一個數組，可以知道文件的數目，而它的元素就是File對象了。從這個File對象可以獲取name、size、lastModifiedDate和type等屬性。把這個File對象傳給FileReader對象的讀取方法，就能讀取文件了。
Html5 支持的File 的操作不僅僅是文件的選擇，
在HTML5 之前需要使用 Applet 和 SilverLight 才能達到的文件拖拽功能，在HTML5 中也能輕松的實現，
看代碼：
[html]view plaincopy
<!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.01?Transitional//EN">??<html>????<head>????<meta?http-equiv="content-type"?content="text/html;?charset=utf-8">????<meta?name="author"?content="oscar999">????<title></title>????</head>????<body>??????<div?id="dropbox">?Drop?Here?</div>??????<div?id="filecontent"></div>??????<script>????????var?dropbox?=?document.getElementById("dropbox");??????????dropbox.addEventListener("dragenter",?dragenter,?false);??????????dropbox.addEventListener("dragover",?dragover,?false);??????????dropbox.addEventListener("drop",?drop,?false);?????????function?dragenter(e)?{????????????e.stopPropagation();????????????e.preventDefault();????????}????????function?dragover(e)?{????????????e.stopPropagation();????????????e.preventDefault();????????}??????function?drop(e)?{????????????e.stopPropagation();????????????e.preventDefault();?????????????var?dt?=?e.dataTransfer;????????????var?files?=?dt.files;??????????if(files.length)??????????{?????????????var?file?=?files[0];?????????????var?reader?=?new?FileReader();?????????????reader.onload?=?function()?????????????{?????????????????document.getElementById("filecontent").innerHTML?=?this.result;?????????????};?????????????reader.readAsText(file);??????????}??????}???????</script>????</body>??</html>??這里通過事件對象的 dataTransfer 可以得到文件。
在第一個例子中， 我們使用 FileReader類來讀取文件的內容，
在 W3C 草案中，File 對象只包含文件名，文件類型等只讀屬性;FileReader用于內容讀取和監控讀取狀態。
（在firefox 中， 可以直接使用 var fileBinary = file.getAsBinary(); 讀取文件的二進制源碼）
FileReader提供的方法包括：
1. readAsBinaryString
2. readAsDataURL
3. readAsText
4. abort
.........
以下，舉一個 使用 FileReader 將用戶選擇的圖片不通過后臺即時顯示出來的例子。
[html]view plaincopy
function?handleFiles(files){??????for?(var?i?=?0;?i?<?files.length;?i++)?{??????????var?file?=?files[i];??????????var?imageType?=?/image.*/;??????????if?(!file.type.match(imageType))?{??????????????continue;??????????}??????????var?img?=?document.createElement("img");??????????img.classList.add("obj");??????????img.file?=?file;??????????preview.appendChild(img);??????????var?reader?=?new?FileReader();??????????reader.onload?=?(function(aImg){??????????????return?function(e){??????????????????aImg.src?=?e.target.result;??????????????};??????????})(img);??????????reader.readAsDataURL(file);??????}??}??在一般的HTML 中，使用方式是把file input 放在form 中， 以POST 方式把文件傳遞到后端。
在 HTML5 中， 也可以通過 FileReader 的 readAsBinaryString 方法讀取到文件的二進制碼，然后通過 XMLHttpRequest 的 sendAsBinary 方法將其發送出去。
[javascript]view plaincopy
var?xhr?=?new?XMLHttpRequest();??xhr.open("POST",?"url");??xhr.overrideMimeType('text/plain;?charset=x-user-defined-binary');??<pre?code_snippet_id="422893"?snippet_file_name="blog_20140709_4_2106578"?class="sh_javascript?sh_sourceCode"?name="code">xhr<span?class="sh_symbol">.</span><span?class="sh_function">sendAsBinary</span><span?class="sh_symbol">(</span>binaryString<span?class="sh_symbol">);</span></pre><br> ?ileReader 對象FileReader 對象主要用來把文件讀入內存，并且讀取文件中的數據。通過構造函數創建一個 FileReader 對象。
這個文件讀取對象有以下幾種方法：
1.readAsText():讀取文本文件(可以使用Txt打開的文件)，返回文本字符串，默認編碼是UTF-8。
2.readAsBinaryString():讀取任意類型的文件。返回二進制字符串。這個方法不是用來讀取文件展示給用戶看，而是存儲文件。例如：讀取文件的內容，獲取二進制數據，傳遞給后臺，后臺接收了數據之后，再將數據存儲。
3.readAsDataURL():讀取文件獲取一段以data開頭的字符串，這段字符串的本質就是DataURL.DataURL是一種將文件(這個文件一般就是指圖像或者能夠嵌入到文檔的文件格式)嵌入到文檔的方案。DataURL是將資源轉換為base64編碼的字符串形式，并且將這些內容直接存儲在url中>>優化網站的加載速度和執行效率。
4.abort():中斷讀取
該對象常見應用在即時預覽：
即時：當用戶選擇完圖片之后就立刻進行預覽的處理 >>onchange。
預覽：通過文件讀取對象的readAsDataURL()完成。
以下是應用時的具體實現（推薦了解黑馬程序員web前端培訓課程）
HTML部分：
JS部分：
其中獲取數據時，FileReader還提供一個完整的事件模型，用來捕獲讀取文件時的狀態。
onabort:讀取文件中斷片時觸發
onerror:讀取錯誤時觸發
onload:文件讀取成功完成時觸發
onloadend:讀取完成時觸發，無論成功還是失敗
onloadstart:開始讀取時觸發
onprogress:讀取文件過程中持續觸發
TML5 對于初學者甚至是非程序員來說都有著十足的吸引力。實際上，只要你訪問網站，就會和 HTML 打交道。如果能夠熟悉一些關鍵的編程技巧，當你對網站做一些細節調整或優化基本的 Web 元素時就能節省大量的時間（甚至是金錢）。因此，本文精選了 10 個對于 Web 開發者來說非常實用的 HTML 編程技巧，而且它們不需要花太多時間精力就可以輕松掌握。
1. 可與本地緩存媒體資源交互
HTML5 FileSystem API 一開始被認為是 AppCache 的替代方案，用來實現資產的動態緩存。但是你知道嗎，其實你還可以用它來實現與用戶本地設備上存儲文件的交互。
例如，你可以在應用中添加以下功能：
注意：FileSystem API 僅被 Chrome 支持。
如果你想嘗試離線存儲功能，還可以參考以下資源和代碼教程：
2. 進行自動表單驗證
對于網站安全性和流暢的用戶體驗來說，表單驗證非常重要。所以我們應該讓用戶更輕松地在你的網站上輸入各種正確類型的值。
在 HTML5 中有幾種新的輸入類型可用，這些類型已經打包進了預定義的驗證功能：
但當你需要用戶提供某些標準輸入未指定的數據時（例如一個包含特殊字符的用戶名），往往就會出問題了。這就是“pattern”屬性派上用場的時候。
Pattern 可讓你定義自定義規則，然后使用正則表達式（RegEx）驗證表單輸入。RegEx 指定了<input>元素值將要檢查的表達式。
下面是一個添加新規則的示例。例如，你要指定密碼不應超過 15 個字符，并且只能包含小寫字母：
<form action="/action_page.php">
Password: <input?type="password"?name="pw"?pattern="[a-z].{1,15,}">
<input?type="submit">
</form>為了更好地說明規則，你還可以添加一條自定義消息，告訴用戶為什么他們輸入的密碼不符合要求。只需再加上一行來自定義彈出消息即可：
<form action="/action_page.php">
Password: <input?type="password"?name="pw"?pattern="[a-z].{1,15,}"?title="One to fifteen characters, lowercase only".>>
<input?type="submit">
</form>3. 為 HTML5 代碼元素創建縮寫
Emmet[4] 是一個很好用的文本編輯器插件，可以簡化你的 HTML/CSS 編碼流程。這個工具使用的語法類似于 CSS 的選擇器，可讓你為標準 HTML 代碼元素創建各種縮寫。
下面是一個例子。如果你輸入：
div#header>h1.logo>a{website}則會收到：
<div?id="header">
<h1?class="logo"><a?href="">website</a></h1>
</div>你可以使用 cheat sheet[5] 中的多種已有組合，也可以為任意 HTML 標簽創建自定義組合，然后按 Tab 或 Ctrl + E 將其添加到文本編輯器中。我自己是一名從事了多年開發的web前端老程序員，目前辭職在做自己的web前端私人定制課程，去年我花了一個月整理了一份最適合2019年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取。
4. 實現更優的視頻傳輸
使用 video 標簽，可以將支持視頻播放的媒體播放器無縫嵌入到網頁中。
你可以選擇：
此外，你必須為視頻指定“控件”（例如播放、暫停和音量調節），否則用戶將沒有任何控件可用。這里的示例代碼如下：
<video width="768"?height="432"?autoplay>
<source?src="video.mp4"?type="video/mp4">
</video>為了進一步改善觀看體驗，你還可以嘗試使用以下屬性：
你可以在這個 HTML 速查表 [7] 中找到更多使用方便的多媒體文件標簽。
5. 改善圖像的顯示方式
<picture>標簽有助于優化圖像的顯示方式。
它通常用于：
示例：
<picture>
<source?media="(min-width: 846px)"?srcset="img_1.jpg">
<source?media="(min-width: 300 px)"?srcset="img_2.jpg">
<img?src="img_3.jpg"?alt="logo">
</picture><picture>標簽包含兩個附加子元素：
要啟用其他樣式選項，請將以下屬性添加到<source>元素：
<img>元素可用來確保在不支持<picture>元素的瀏覽器中正確顯示圖像。
6. 提升首屏頁面的加載速度
如果你希望你的網站在搜索結果中獲得靠前的排名，并提供出色的用戶體驗，那么就需要重點關注頁面的加載速度。
但是，要在 Google Page Insights 中拿到高分并不是那么容易。雖然這一工具的確會標出你的網站上應該修復的內容，但是對于從頭開始對網站進行編碼的人們并沒有提供明確的優化指導。
谷歌對于首屏設計的官方建議 [8] 有些含糊不清：
所以我們來將其分解為更可操作的幾個步驟：
然后再次運行檢查任務，看看是否還有需要修復的內容。
7. 網站加速
只要將 .zip 文件而不是 index.html 文件發送給瀏覽器，就可以節省大量帶寬和下載時間。
圖片來自 betterexplained[11]
要設置 .gzip 壓縮，你需要在 web 主機 / 服務器上找到 htaccess 文件，并使用以下代碼對其進行修改：
<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include?file?.(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>如果這樣做不起作用，請參考下面這些針對不同 web 服務器類型的教程：
8. 利用 Microdata 進行 SEO
你可以使用 microdata 將額外的上下文編入網頁。然后，網絡爬蟲就可以從你的頁面中渲染微數據，并為用戶提供更好的瀏覽體驗，以更高的精確性對你的網站建立索引并為其提供更準確的搜索結果排名。
簡而言之，Microdata 由名稱 / 值（name/value）對組成，每一個項目（item）定義一組命名的屬性（property）。
9. 使用 HTML5 本地存儲代替 Cookie
Local Storage（也稱為 DOM 存儲）使你可以在本地存儲用戶數據，這樣就無需通過 HTTP 網絡請求發送數據了。它可以節省帶寬并提升數據存儲能力。看起來不錯吧？
但是有一個重要的警告：本地存儲僅能保存在客戶端，而 cookie 既可以保存在服務器端也可以在客戶端。因此，如果你的網站使用了服務器端的 Cookie 來基于已知的用戶首選項自定義內容，則遷移到本地存儲可能就需要重大的架構更改工作了。
但在比較簡單的情況下（例如你使用 Cookie 來存儲一些基本設置），本地存儲可能是一個很好的替代品，尤其是在網絡連接質量較差的區域。另外請記住，本地存儲對于高敏感數據（例如財務信息）可能不是理想的選擇，并且建議你對本地存儲的所有數據都進行額外的加密。
Jenkov 詳細介紹了如何設置和配置 HTML5 本地存儲 [13]。
10. 編寫有編號項目的降序列表
文章最后介紹一個非常簡單的技巧：你可以使用<reversed>屬性添加降序列表替代升序列表。
下面是一個示例代碼片段：
<ol?reversed>
<li>Ready</li>
<li>Set</li>
<li>Go!</li>
</ol>聽起來可能沒有多大意義，但是當你想在頁面中添加一些時髦的樣式時，它可能就會派上用場了。
小結
現在你應該掌握了這 10 個新的 HTML5 技巧和竅門，它們應該可以幫助你構建更快、更人性化和更有吸引力的網站。不過千萬要記得，在開始實驗之前先對你的網站進行備份！
原文鏈接：https://mp.weixin.qq.com/s/qtQZUvsnIn0nsFbG51lQQw
作者：前端工匠
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
