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

言

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

該元素包含一個(gè)文本輸入字段，用來(lái)輸入文件名，還有一個(gè)按鈕，用來(lái)打開(kāi)文件選擇對(duì)話框以便圖形化選擇文件。

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

當(dāng)用戶(hù)選擇或編輯一個(gè)文件名，file-upload 元素觸發(fā) onchange 事件句柄。

看個(gè)簡(jiǎn)單例子：

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

這里讀取一個(gè)文件，顯示在div 中。

(在IE8 中無(wú)效， this.files 無(wú)法讀取文件。這個(gè)屬于HTML5 的特性)

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

HTML5 Drag and Drop File

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

在HTML5 之前需要使用 Applet 和 SilverLight 才能達(dá)到的文件拖拽功能，在HTML5 中也能輕松的實(shí)現(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>??

這里通過(guò)事件對(duì)象的 dataTransfer 可以得到文件。

讀取文件內(nèi)容

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

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

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

FileReader提供的方法包括：

1. readAsBinaryString

2. readAsDataURL

3. readAsText

4. abort

.........

以下，舉一個(gè) 使用 FileReader 將用戶(hù)選擇的圖片不通過(guò)后臺(tái)即時(shí)顯示出來(lái)的例子。

[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 中，也可以通過(guò) FileReader 的 readAsBinaryString 方法讀取到文件的二進(jìn)制碼，然后通過(guò) 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> ?

、 input分類(lèi)

根據(jù)顯示效果將input分為五類(lèi)

文本框類(lèi)：type值為text，password。
按鈕類(lèi)：type值為button，reset，submit。
選框類(lèi)：type值為checkbox，radio。
圖片類(lèi)：type值為image。
文件類(lèi)：type值為file。

二、原始顯示效果

首先我們先看一下上述各類(lèi)input在瀏覽器中原始顯示效果，代碼如下

     <!-- html-->
     <p>1.文本框類(lèi)</p>
    <input type="text" class="text" value="文本" />
    <input type="password" class="password" value="密碼" />
    <p>2.按鈕類(lèi)</p>
    <input type="button" class="button" />
    <input type="reset" class="reset" />
    <input type="submit" class="submit" />
    <p>3.選框類(lèi)</p>
    <input type="checkbox" class="checkbox" name="" id="" />
    <input type="radio" class="radio" />
    <p>4.圖片類(lèi)</p>
    <!-- 此處省略了圖片地址-->
    <input type="image" class="image" src="" />
    <p>5.文件類(lèi)</p>
    <input type="file" class="file" />
    <input type="hidden" class="hidden" />

在pc端各主流瀏覽器中顯示效果如下

在移動(dòng)端各主流瀏覽器中顯示效果如下

三、自定義樣式（含清除默認(rèn)樣式）

1. 文本框類(lèi)

（1）占位文本樣式修改(placeholder)
占用文本樣式修改使用偽元素::placeholder,這偽元素雖然還是一個(gè)實(shí)驗(yàn)功能，但是其實(shí)已經(jīng)得到了大部分瀏覽器的支持，如果瀏覽器版本過(guò)低可以使用添加前綴來(lái)做兼容，MDN文檔給的兼容情況如下圖。

值得注意的是，該偽元素可以支持修改的屬性值有限，具體支持的屬性見(jiàn)下圖

（2）聚焦樣式修改（focus）
聚焦樣式修改使用偽類(lèi):focus,該偽類(lèi)可以支持修改input所有的css屬性，可以放心使用
（3）常規(guī)樣式修改
常規(guī)樣式例如border，color，font-size的部分都可以直接修改。
（4）清除默認(rèn)樣式
上面css屬性修改可以覆蓋掉大部分原有的樣式，從而達(dá)到清除默認(rèn)樣式的效果。但是在iOS中input上不會(huì)有默認(rèn)的陰影樣式覆蓋不了，需要使用-webkit-appearance: none;將其清除。
注意：在ios中還有一個(gè)與其他瀏覽器不同的地方——當(dāng)input的line-height大于font-size時(shí)，輸入文字時(shí)光標(biāo)長(zhǎng)度不對(duì)，下圖所示input的line-height=3，可以看出其光標(biāo)是從input最上方開(kāi)始的，這樣顯然顯示效果不好，因此我們建議line-height=1，如果需要擴(kuò)展input的高度，使用padding來(lái)實(shí)現(xiàn)。

2. 按鈕類(lèi)

按鈕類(lèi)input修改默認(rèn)樣式比較簡(jiǎn)單，只需要常規(guī)樣式修改和偽類(lèi)修改。其中偽類(lèi):hover和:active比較常用，只要用于修改懸停樣式和點(diǎn)擊樣式。

3. 選框類(lèi)

選框類(lèi)input在不同瀏覽器中顯示效果差別很大，因此對(duì)于前端開(kāi)發(fā)者來(lái)說(shuō)，自定義樣式是很有必要的。
1）單選框樣式自定義
常用的辦法是隱藏原來(lái)的單選框，然后創(chuàng)建一個(gè)單選框。以下面代碼為例

<!-- label中for屬性值與input中id值相同即可關(guān)聯(lián) -->
<input type="radio" class="radio" name="sex" id="male"  />
<label for="male" class="label">男</label>
<input type="radio" class="radio" name="sex" id="female" />
<label for="female" class="label">女</label>

/*css*/
/* 隱藏原有的ridio選框 */
.radio {
  display: none;
}
.label {
  position: relative; /* 作為定位基準(zhǔn) */
  margin-left: 20px; /* 給label左側(cè)添加margin（padding也行），給自定義radio留位置 */
}

/* 自定義radio（未選中）樣式 */
.label::before {
  display: inline-block;
  position: absolute;
  content: "";
  width: 16px;
  height: 16px;
  border: 1px solid yellowgreen;
  left: -20px;
  top: 3px; /*根據(jù)label高度和自身需求設(shè)置top*/
}

/* 自定義radio（選中）樣式 */
.radio:checked + .label::before {
  border: 1px solid skyblue;
}
.radio:checked + .label::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background-color: skyblue;
  left: -16px;
  top: 7px;
}

顯示效果如下圖

注意

input類(lèi)元素不支持:before和:after，因此需要靠label來(lái)實(shí)現(xiàn)；
上例使用了相鄰選擇器來(lái)選定元素，這是上述效果得以實(shí)現(xiàn)的基礎(chǔ)（ridio和label中間不能添加其他的元素）。

上面的例子只是一種方法，如果不使用為元素，可以在radio和label中間添加一個(gè)div作為自定義的radio選框。

2）多選框樣式自定義
多選框樣式自定義與單選框自定義樣式的方式一摸一樣，如下面代碼

<!-- html -->
<input type="checkbox" class="checkbox" name="sex" id="male" />
<label for="male" class="label">男</label>
<input type="checkbox" class="checkbox" name="sex" id="female" checked />
<label for="female" class="label">女</label>
<input type="checkbox" class="checkbox" name="sex" id="undefind" checked />
<label for="undefind" class="label">不明</label>

/* css*/
/* 隱藏原有的checkbox選框 */
.checkbox {
  display: none;
}
.label {
  position: relative; /* 作為定位基準(zhǔn) */
  margin-left: 20px; /* 給label左側(cè)添加margin（padding也行），給自定義checkbox留位置 */
}

/* 自定義checkbox（未選中）樣式 */
.label::before {
  display: inline-block;
  position: absolute;
  content: "";
  width: 16px;
  height: 16px;
  border: 1px solid yellowgreen;
  left: -20px;
  top: 3px; /*根據(jù)label高度和自身需求設(shè)置top*/
}

/* 自定義checkbox（選中）樣式 */
.checkbox:checked + .label::before {
  border: 1px solid skyblue;
}
.checkbox:checked + .label::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background-color: skyblue;
  left: -16px;
  top: 7px;
}

顯示效果如下圖

4. 圖片類(lèi)

這類(lèi)input在平常使用較少，如果需要顯示圖片建議直接使用img標(biāo)簽。

5. 文件類(lèi)

目前常用的做法是使用元素（一般使用a元素）包裹住input，外層元素樣式即為此次自定義樣式，同時(shí)將input透明度設(shè)置為0，寬高與外層元素寬高一致，這樣可以保證點(diǎn)擊外層元素是出發(fā)input。示例代碼如下

<!-- html -->
<a href="javascript：;" class="file">
  <input type="file" name="" id="" />點(diǎn)擊這里上傳文件
</a>

/* css */
.file {
  padding: 4px 10px;
  height: 20px;
  line-height: 20px;
  position: relative;
  cursor: pointer;
  color: #888;
  background: #fafafa;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
  display: inline-block;
  zoom: 1;
}
.file input {
  position: absolute;
  opacity: 0;
  filter: alpha(opacity= 0);
  cursor: pointer;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.file:hover {
  color: #444;
  background: #eee;
  border-color: #ccc;
  text-decoration: none;
}

顯示效果如下：

注意：以上操作會(huì)隱藏上傳的文件，如果需要顯示，需要額外添加一個(gè)元素并且配合使用js用于顯示上傳的文件，在此不過(guò)多說(shuō)明，有興趣的可以自行研究。

在線咨詢(xún)

上一篇：一文講解HTML標(biāo)題標(biāo)記
下一篇：HTML5古典風(fēng)格的音樂(lè)播放器

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

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

言

HTML5 Drag and Drop File

讀取文件內(nèi)容

同后端的交互

、 input分類(lèi)

二、原始顯示效果

三、自定義樣式（含清除默認(rèn)樣式）

1. 文本框類(lèi)

2. 按鈕類(lèi)

3. 選框類(lèi)

4. 圖片類(lèi)

5. 文件類(lèi)

您的項(xiàng)目需求