「JS進(jìn)階」 HTML5 之文件操作(file)

言

在 HTML 文檔中 <input type="file"> 標(biāo)簽每出現(xiàn)一次，一個 FileUpload 對象就會被創(chuàng)建。

該元素包含一個文本輸入字段，用來輸入文件名，還有一個按鈕，用來打開文件選擇對話框以便圖形化選擇文件。

該元素的 value 屬性保存了用戶指定的文件的名稱，但是當(dāng)包含一個 file-upload 元素的表單被提交的時候，瀏覽器會向服務(wù)器發(fā)送選中的文件的內(nèi)容而不僅僅是發(fā)送文件名。

當(dāng)用戶選擇或編輯一個文件名，file-upload 元素觸發(fā) 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 的特性)

當(dāng)選擇了一個文件時，就會把包含這個文件的列表（一個FileList對象）作為參數(shù)傳給handleFiles()函數(shù)了。這個FileList對象類似一個數(shù)組，可以知道文件的數(shù)目，而它的元素就是File對象了。從這個File對象可以獲取name、size、lastModifiedDate和type等屬性。把這個File對象傳給FileReader對象的讀取方法，就能讀取文件了。

HTML5 Drag and Drop File

Html5 支持的File 的操作不僅僅是文件的選擇，

在HTML5 之前需要使用 Applet 和 SilverLight 才能達(dá)到的文件拖拽功能，在HTML5 中也能輕松的實現(xiàn)，

看代碼：

[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 可以得到文件。

讀取文件內(nèi)容

在第一個例子中，我們使用 FileReader類來讀取文件的內(nèi)容，

在 W3C 草案中，F(xiàn)ile 對象只包含文件名，文件類型等只讀屬性;FileReader用于內(nèi)容讀取和監(jiān)控讀取狀態(tài)。

（在firefox 中，可以直接使用 var fileBinary = file.getAsBinary(); 讀取文件的二進(jìn)制源碼）

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 方法讀取到文件的二進(jìn)制碼，然后通過 XMLHttpRequest 的 sendAsBinary 方法將其發(fā)送出去。

[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> ?

、常用的標(biāo)簽

<h1>~<h6> 表示是一個標(biāo)題

<p> 段落標(biāo)簽

<hr/> 水平線標(biāo)簽

<br/> 換行標(biāo)簽

<sub> 下標(biāo)

<sup> 上標(biāo)

<pre> 原樣標(biāo)簽：原樣標(biāo)簽會保留空格和換行符。

<ol> <li> 有序的列表標(biāo)簽、

<ul> <li> 無序的列表標(biāo)簽。

項目列表標(biāo)簽(dl dt dd)

行內(nèi)標(biāo)簽(span)

塊標(biāo)簽<div> div標(biāo)簽的內(nèi)容會獨立占一行。

二、實體標(biāo)簽

空格  

小于號 <

大于號 >

-----------------------------

人民幣 &yen；

版權(quán) ©

商標(biāo) ®

三、媒體標(biāo)簽

<embed></embed>

hidden ：設(shè)置隱藏插件是否隱藏。

src ：用于指定音樂的路徑

<marquee> 飄動標(biāo)簽direction : 指定飄動的方向

scrollamount : 指定飄動的速度。

loop :指定飄動的次數(shù)

四、超鏈接標(biāo)簽

<a> 超鏈接標(biāo)簽

a標(biāo)簽常用的屬性：

href : 用于指定鏈接的資源

target: 設(shè)置打開新資源的目標(biāo)。

_Blank 在獨立的窗口上打開新資源

_self 在當(dāng)前窗口打開新資源

file: file協(xié)議（文件協(xié)議）這種協(xié)議主要是用于搜索本地機(jī)器的資源文件的。

格式：

file:///f:/美女/1.jpg

郵件的協(xié)議： mailTo迅雷的協(xié)議： thunder

超鏈接標(biāo)簽的作用：

1. 可以用于鏈接資源。

2. 錨點點位.

1. 首先編寫一個錨點錨點的格式： <a name="錨點名字"> 數(shù)據(jù)</a>

2. 使用a標(biāo)簽的herf屬性連接到錨點出。 href=”#錨點的名字“

五、圖片標(biāo)簽

img標(biāo)簽常用的屬性:

width：設(shè)置圖片寬度

height 設(shè)置圖片高度

alt: 如果圖片資源無法找到，那么就顯示對應(yīng)的文字對圖片進(jìn)行說明。

六、表格標(biāo)簽

表格使用到的標(biāo)簽：

<table> 表格

<tr> 行

<td> 單元格

<th> 表頭默認(rèn)的樣式是居中，加粗。

<caption> 表格的標(biāo)題

表格常用的屬性：

border 設(shè)置表格的邊框

width : 設(shè)置表格的寬度

height: 設(shè)置表格的高度的。

colspan: 設(shè)置單元格占據(jù)指定的列數(shù)。

rowspan : 設(shè)置單元格占據(jù)指定的行數(shù)。

<thead> 標(biāo)簽用于組合 HTML 表格的表頭內(nèi)容。

<thead> 元素應(yīng)該與 <tbody> 和 <tfoot> 元素結(jié)合起來使用，用來規(guī)定表格的各個部分（表頭、主體、頁腳）。

通過使用這些元素，使瀏覽器有能力支持獨立于表格表頭和表格頁腳的表格主體滾動。當(dāng)包含多個頁面的長的表格被打印時，表格的表頭和頁腳可被打印在包含表格數(shù)據(jù)的每張頁面上。

<thead> 標(biāo)簽必須被用在以下情境中：作為 <table> 元素的子元素，出現(xiàn)在 <caption>、<colgroup> 元素之后，<tbody>、 <tfoot> 和 <tr> 元素之前。

七、表單標(biāo)簽

<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
<!-- 表單標(biāo)簽： 表單標(biāo)簽的作用是用于提交數(shù)據(jù)給服務(wù)器的表單標(biāo)簽的根標(biāo)簽是<form>標(biāo)簽常用的屬性action: 該屬性是用于指定提交數(shù)據(jù)的地址。method： 指定表單的提交方式。get : 默認(rèn)使用的提交方式。 提交的數(shù)據(jù)會顯示在地址欄上。post ： 提交的數(shù)據(jù)不會顯示在地址欄上。注意： 表單項的數(shù)據(jù)如果需要提交到服務(wù)器上面，那么表單項必須要有name的屬性值 -->

</head>
<body>
<form action="http://www.baidu.com" method="post"> <!-- 文本輸入框 單 行- -> 用戶名：<input name="userName" type="text"/><br/>
<!-- 密碼框 -->
密碼：<input name="password" type="password"/><br/>
<!-- 單選框 -->
性別： 男<input checked="true" value="man" name="sex" type="radio"/>
女<input name="sex" value="woman" type="radio"/><br/>
< !-- 下拉框 -->
來自的城市：<select name="city">
<option value="BJ">北京</option>
<option value="SH">上海</option>
<option value="GZ">廣州</option>
<option value="SZ">深圳</option>
</select><br/>
<!-- 復(fù)選框 同一組的復(fù)選框name的屬性值要一致 -->
興趣愛好：java <input value="java" name="hobit" checked="checked" type ="checkbox" />
javascript <input type="checkbox" value="javascript" name="hobit" />
android <input value="android" name="hobit" type="checkbox" /><br/> <!-- 文件上傳框-->
大頭照：<input name="image" type="file" /><br/>
個人簡介:
<!-- 文本域 -->
<textarea name="intro" rows="10" cols="30"></textarea><br/>
<!-- 提交按鈕 -->
<input type="submit" value="注冊"/>
<!-- 重置按鈕 -->
<input type="reset" value="重置"/>
</form>
</body>
</html>

更多精彩內(nèi)容在微信公眾平臺：網(wǎng)頁設(shè)計自學(xué)平臺

干貨！免費領(lǐng)取Adobe高級講師前端教程

點我領(lǐng)取

覽器支持

所有主流瀏覽器都支持 <a> 標(biāo)簽。

標(biāo)簽定義及使用說明

<a> 標(biāo)簽定義超鏈接，用于從一個頁面鏈接到另一個頁面。

<a> 元素最重要的屬性是 href 屬性，它指定鏈接的目標(biāo)。

在所有瀏覽器中，鏈接的默認(rèn)外觀如下：

未被訪問的鏈接帶有下劃線而且是藍(lán)色的
已被訪問的鏈接帶有下劃線而且是紫色的
活動鏈接帶有下劃線而且是紅色的

提示和注釋

提示：如果沒有使用 href 屬性，則不能使用 hreflang、media、rel、target 以及 type 屬性。

提示：通常在當(dāng)前瀏覽器窗口中顯示被鏈接頁面，除非規(guī)定了其他 target。

提示：請使用 CSS 來改變鏈接的樣式。

HTML 4.01 與 HTML5之間的差異

在 HTML 4.01 中，<a> 標(biāo)簽既可以是超鏈接，也可以是錨。在 HTML5 中，<a> 標(biāo)簽是超鏈接，但是假如沒有 href 屬性，它僅僅是超鏈接的一個占位符。

HTML5 有一些新的屬性，同時不再支持一些 HTML 4.01 的屬性。

屬性

New ：HTML5 中的新屬性。

屬性	值	描述
charset	char_encoding	HTML5 不支持。規(guī)定目標(biāo) URL 的字符編碼。
coords	coordinates	HTML5 不支持。規(guī)定鏈接的坐標(biāo)。
downloadNew	filename	指定下載鏈接
href	URL	規(guī)定鏈接的目標(biāo) URL。
hreflang	language_code	規(guī)定目標(biāo) URL 的基準(zhǔn)語言。僅在 href 屬性存在時使用。
mediaNew	media_query	規(guī)定目標(biāo) URL 的媒介類型。默認(rèn)值：all。僅在 href 屬性存在時使用。
name	section_name	HTML5 不支持。規(guī)定錨的名稱。
rel	alternateauthorbookmarkhelplicensenextnofollownoreferrerprefetchprevsearchtag	規(guī)定當(dāng)前文檔與目標(biāo) URL 之間的關(guān)系。僅在 href 屬性存在時使用。
rev	text	HTML5 不支持。規(guī)定目標(biāo) URL 與當(dāng)前文檔之間的關(guān)系。
shape	defaultrectcirclepoly	HTML5 不支持。規(guī)定鏈接的形狀。
target	_blank_parent_self_topframename	規(guī)定在何處打開目標(biāo) URL。僅在 href 屬性存在時使用。
typeNew	MIME_type	規(guī)定目標(biāo) URL 的 MIME 類型。僅在 href 屬性存在時使用。注：MIME = Multipurpose Internet Mail Extensions。

全局屬性

<a> 標(biāo)簽支持 HTML 的全局屬性。

事件屬性

<a> 標(biāo)簽支持 HTML 的事件屬性。

創(chuàng)建超級鏈接

本例演示如何在 HTML 文檔中創(chuàng)建鏈接。

將圖像作為鏈接

本例演示如何使用圖像作為鏈接。

在新的瀏覽器窗口打開鏈接

本例演示如何在新窗口打開一個頁面，這樣的話訪問者就無需離開您的站點了。

創(chuàng)建電子郵件鏈接

本例演示如何鏈接到一個郵件。（本例在安裝郵件客戶端程序后才能工作。）

創(chuàng)建電子郵件鏈接 2

本例演示更加復(fù)雜的郵件鏈接。

使用錨跳轉(zhuǎn)到同一個頁面的不同位置

本例演示如何使用錨的 id 屬性跳轉(zhuǎn)到頁面的不同位置（ HTML5 不支持 name 屬性）

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

在線咨詢

上一篇：日本一上線倒計時網(wǎng)站將于9月25日公開全新作品
下一篇：一文搞懂瀏覽器緩存機(jī)制

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

「JS進(jìn)階」 HTML5 之文件操作(file)

言

HTML5 Drag and Drop File

讀取文件內(nèi)容

同后端的交互

您的項目需求