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

言

在 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 Drag and Drop File

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

者：HelloGitHub-kalifun

這是 HelloGitHub 推出的《講解開源項目》^[1]系列，今天給大家推薦一個

JavaScript 開源的文件上傳庫項目——FilePond

一、介紹

1.1 FilePond

它是一個 JavaScript 文件上傳庫。可以拖入上傳文件，并且會對圖像進行優化以加快上傳速度。讓用戶體驗到出色、進度可見、如絲般順暢的文件上傳體驗。

FilePond 項目地址：https://github.com/pqina/filepond

1.2 特點和優勢

上傳內容：支持目錄、文件、多個文件、本地路徑、遠程 URL 等。
文件管理：刪除文件、選擇文件、復制和粘貼文件、或使用 API 方式添加文件。
上傳方式：使用 AJAX 進行異步上傳、或將文件編碼為 base64 數據用表單發送。
圖像優化：自動調整圖像大小、裁剪和修復 EXIF 方向。
響應式：可在移動和桌面設備上使用。

看了效果圖和功能介紹，是不是有些手癢了。接下來就是實戰操作部分，大家可以跟著文章一步步的把這個庫使用起來，點亮你的文件上傳技能點！

實戰操作

下面我們將一步步的講解如何使用 FilePond 這個庫。我們采用的是最簡單的 CDN 引用方式，方便大家能夠快速體檢其魅力（復制代碼便可查看效果），接著會深入講解每個插件的功能，最終編寫了一個組合了幾個插件的示例及運行效果展示。

Tips： 解釋說明均在代碼中以注釋方式展示，請大家注意閱讀。

2.1快速使用（CDN）

示例代碼：

<!DOCTYPE html>
<html>
<head>
 <!-- html 標題 -->
 <title>FilePond from CDN</title>
?
 <!-- 引入Filepond的css -->
 <link  rel="stylesheet">
?
</head>
<body>
?
<!-- input標簽作為文件上傳入口 -->
<input type="file" class="filepond">
?
<!-- 引入FilePond的js -->
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>
?
?
<script>
 // FilePond.parse 使用類.filepond解析DOM樹的給定部分，并將它們轉換為FilePond元素。
 FilePond.parse(document.body);
</script>
?
</body>
</html>
?

展示效果：

2.2

引入插件

似乎單純的上傳功能是否無法滿足我們的需求，FilePond 該庫擁有多樣、強大的插件部分，可以根據自己的需求選擇插件組合起來使用哦。下面先簡單的了解一下每個插件的功能：

File Rename：重命名客戶端上的文件
File Encode：將文件編碼為 base64 數據
File size Validation：文件大小驗證工具
File Type Validation：文件類型驗證工具
File Metadata：限制要添加的文件類型
File Poster：在文件項目中顯示圖像
Image Preview：顯示圖像文件的預覽
Image Edit：手動編輯圖像文件
Image Crop：設置圖像文件的裁剪比例
Image Resize：設置圖像文件的輸出尺寸
Image Transform：上傳之前在客戶端上圖像變換
Image EXIF Orientation：提取 EXIF^[2] 方向信息
Image Size Validation：限制要添加的圖像的尺寸
Image Filter：將顏色矩陣應用于圖像像素

下面我來介紹如何引入插件吧！

坑！： 使用插件前，一定要查閱清楚該插件是否有 CSS 文件，如果有請在<head><link href="xxx.css" rel="stylesheet"></head>標簽中引入哦。

<head>
 <!-- 引入圖像預覽插件的css文件 -->
 <link  rel="stylesheet">
</head>
<!-- 引入圖像預覽插件的js文件 -->
<script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js"></script>
?
<script>
?
// 注冊插件 FilePondPluginImagePreview 圖像預覽插件為已上傳的圖像呈現縮小的預覽。
FilePond.registerPlugin(FilePondPluginImagePreview);
</script>

我們梳理一下引入插件的步驟：引入 CSS 文件（部分插件有 CSS 文件）
引入 JS 文件
注冊插件
配置插件（部分插件需配置）

2.3 配合插件使用

完整示例代碼：

<!DOCTYPE html>
<html>
<head>
 <title>FilePond from CDN</title>
?
 <!-- Filepond CSS -->
 <link  rel="stylesheet">
 <!-- FilePondPluginImagePreview 插件 CSS-->
 <link  rel="stylesheet">
 <!-- FilePondPluginImageEdit 插件 CSS-->
 <link  rel="stylesheet">
</head>
?
<body>
?
<!-- 我們將把這個輸入框變成上傳文件框 -->
<input type="file" class="filepond">
?
<!-- FilePondPluginImagePreview 插件js-->
<script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js"></script>
<!--FilePondPluginImageEdit 插件js-->
<script src="https://unpkg.com/filepond-plugin-image-edit/dist/filepond-plugin-image-edit.js"></script>
<!--FilePondPluginFileValidateSize 插件js-->
<script src="https://unpkg.com/filepond-plugin-file-validate-size/dist/filepond-plugin-file-validate-size.js"></script>
<!--FilePondPluginFileValidateType 插件js-->
<script src="https://unpkg.com/filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type.js"></script>
<!--FilePondPluginImageCrop 插件js-->
<script src="https://unpkg.com/filepond-plugin-image-crop/dist/filepond-plugin-image-crop.js"></script>
<!--FilePondPluginImageExifOrientation 插件js-->
<script src="https://unpkg.com/filepond-plugin-image-exif-orientation/dist/filepond-plugin-image-exif-orientation.js"></script>
<!--引入Filepond的js-->
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>
?
<script>
 // querySelector() 方法返回文檔中匹配指定 CSS 選擇器的一個元素。
 var inputElement = document.querySelector('input[type="file"]');
?
 // 注冊插件
 // FilePondPluginImagePreview 上傳時可以預覽到上傳的圖片等
 // FilePondPluginImageEdit 由于doka收費，所以編輯功能就不演示了。
 // FilePondPluginFileValidateType 圖片類型
 // FilePondPluginImageCrop 圖像裁剪
 // FilePondPluginFileValidateSize 文件大小驗證插件處理阻止太大的文件。
 FilePond.registerPlugin(
 FilePondPluginImagePreview,
 FilePondPluginImageEdit,
 FilePondPluginFileValidateSize,
 FilePondPluginImageCrop,
 FilePondPluginFileValidateType,
 FilePondPluginImageExifOrientation
?
 );
?
 FilePond.setOptions({
 // 設置單個URL是定義服務器配置的最基本形式。
 server: '/upload',
 // 設置圖片類型只能為png才能上傳
 allowFileTypeValidation: false,
 acceptedFileTypes: "image/jpg",
 // 啟用或禁用圖像裁剪
 allowImageCrop: true,
?
 // 啟用或禁用文件大小驗證
 allowFileSizeValidation: true,
 maxFileSize: null,
?
 // 啟用或禁用提取EXIF信息
 allowImageExifOrientation: true
?
 });
?
 // 使用create方法逐步增強基本文件輸入到FilePond元素。
 FilePond.create(inputElement)
</script>
?
</body>
</html>

上面的示例展示了 FilePond 常用插件的方法，效果展示如下：

當然還

其它方法如： destroys：銷毀實例
find：返回附加提供的元素的實例
getOptions：返回當前的配置項
supported：鑒別瀏覽器是否支持 FilePond

這里就不做完整的講解了，有興趣的可以自行嘗試使用這些方法。

三、總結

以上就是講解的全部內容，FilePond 是一款很輕便的上傳插件。并沒有太多繁瑣的配置，這里我并沒有逐一針對每個插件引入進行演示，只展示了常用的部分。留意上面提示的坑，掌握上面講解的方法，其它的插件你便可自行學習。

FilePond 是一款很值得參考和使用的 JavaScript 庫，如果想讓自己網站快速加入上傳功能，不妨試試它吧。

References

[1] 《講解開源項目》: https://github.com/HelloGitHub-Team/Article

[2]EXIF: https://baike.baidu.com/item/Exif/422825?fr=aladdin

[3]FilePond 官方文檔: https://pqina.nl/filepond/docs/

[4]FilePond Plugins List: https://pqina.nl/filepond/plugins.html

關注公眾加入交流群，一起討論有趣的技術話題

『講解開源項目系列』——讓對開源項目感興趣的人不再畏懼、讓開源項目的發起者不再孤單。跟著我們的文章，你會發現編程的樂趣、使用和發現參與開源項目如此簡單。歡迎聯系我（微信：xueweihan 備注：講解）加入我們，讓更多人愛上開源、貢獻開源～

我們瀏覽網頁時可能需要把網頁上的內容保存下來，這時候有幾種方式可以做到：1、把重要的內容復制出來；2、對網頁進行截圖保存，我們推薦過的截圖插件如印象筆記·剪藏、Full Page Screen Capture等；3、把網頁保存成PDF，如Adobe Acrobat。4、直接把網頁保存成HTML。當然所有瀏覽器都有另存頁面為HTML 文檔的功能，不過可能會遇到一些問題，保存后不是各種資源如JS、CSS和圖片的文件很多，就是打開后無法載入樣式表，圖片顯示不出來，要把網頁備份起來或傳送給別人就很麻煩。本文要介紹的SingleFile是一款免費瀏覽器擴展，可以將完整的頁面保存到一個HTML文件中，包括所有CSS和圖片等等，讓用戶即使在一個HTML文檔中也能瀏覽完整內容。除了單一頁面外，SingleFile還支持保存選中的部分、非固定標簽頁或所有頁面，操作上也非常的簡單易用。如果你有保存頁面的需求，可以試試這款插件。

簡介

SingleFile

在線咨詢

上一篇：一鍵生成通用高亮代碼塊到剪貼板，可粘貼到在線編輯器
下一篇：HTML中的href屬性：掌握超鏈接技巧，提升網站用戶體驗

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

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

言

HTML5 Drag and Drop File

讀取文件內容

同后端的交互

您的項目需求