功能強(qiáng)大的 JS 文件上傳庫(kù)：FilePond

者：HelloGitHub-kalifun

這是 HelloGitHub 推出的《講解開(kāi)源項(xiàng)目》^[1]系列，今天給大家推薦一個(gè)

JavaScript 開(kāi)源的文件上傳庫(kù)項(xiàng)目——FilePond

一、介紹

1.1 FilePond

它是一個(gè) JavaScript 文件上傳庫(kù)。可以拖入上傳文件，并且會(huì)對(duì)圖像進(jìn)行優(yōu)化以加快上傳速度。讓用戶(hù)體驗(yàn)到出色、進(jìn)度可見(jiàn)、如絲般順暢的文件上傳體驗(yàn)。

FilePond 項(xiàng)目地址：https://github.com/pqina/filepond

1.2 特點(diǎn)和優(yōu)勢(shì)

上傳內(nèi)容：支持目錄、文件、多個(gè)文件、本地路徑、遠(yuǎn)程 URL 等。
文件管理：刪除文件、選擇文件、復(fù)制和粘貼文件、或使用 API 方式添加文件。
上傳方式：使用 AJAX 進(jìn)行異步上傳、或?qū)⑽募幋a為 base64 數(shù)據(jù)用表單發(fā)送。
圖像優(yōu)化：自動(dòng)調(diào)整圖像大小、裁剪和修復(fù) EXIF 方向。
響應(yīng)式：可在移動(dòng)和桌面設(shè)備上使用。

看了效果圖和功能介紹，是不是有些手癢了。接下來(lái)就是實(shí)戰(zhàn)操作部分，大家可以跟著文章一步步的把這個(gè)庫(kù)使用起來(lái)，點(diǎn)亮你的文件上傳技能點(diǎn)！

實(shí)戰(zhàn)操作

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

Tips： 解釋說(shuō)明均在代碼中以注釋方式展示，請(qǐng)大家注意閱讀。

2.1快速使用（CDN）

示例代碼：

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

展示效果：

2.2

引入插件

似乎單純的上傳功能是否無(wú)法滿(mǎn)足我們的需求，F(xiàn)ilePond 該庫(kù)擁有多樣、強(qiáng)大的插件部分，可以根據(jù)自己的需求選擇插件組合起來(lái)使用哦。下面先簡(jiǎn)單的了解一下每個(gè)插件的功能：

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

下面我來(lái)介紹如何引入插件吧！

坑！： 使用插件前，一定要查閱清楚該插件是否有 CSS 文件，如果有請(qǐng)?jiān)?lt;head><link href="xxx.css" rel="stylesheet"></head>標(biāo)簽中引入哦。

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

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

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>
?
<!-- 我們將把這個(gè)輸入框變成上傳文件框 -->
<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 選擇器的一個(gè)元素。
 var inputElement = document.querySelector('input[type="file"]');
?
 // 注冊(cè)插件
 // FilePondPluginImagePreview 上傳時(shí)可以預(yù)覽到上傳的圖片等
 // FilePondPluginImageEdit 由于doka收費(fèi)，所以編輯功能就不演示了。
 // FilePondPluginFileValidateType 圖片類(lèi)型
 // FilePondPluginImageCrop 圖像裁剪
 // FilePondPluginFileValidateSize 文件大小驗(yàn)證插件處理阻止太大的文件。
 FilePond.registerPlugin(
 FilePondPluginImagePreview,
 FilePondPluginImageEdit,
 FilePondPluginFileValidateSize,
 FilePondPluginImageCrop,
 FilePondPluginFileValidateType,
 FilePondPluginImageExifOrientation
?
 );
?
 FilePond.setOptions({
 // 設(shè)置單個(gè)URL是定義服務(wù)器配置的最基本形式。
 server: '/upload',
 // 設(shè)置圖片類(lèi)型只能為png才能上傳
 allowFileTypeValidation: false,
 acceptedFileTypes: "image/jpg",
 // 啟用或禁用圖像裁剪
 allowImageCrop: true,
?
 // 啟用或禁用文件大小驗(yàn)證
 allowFileSizeValidation: true,
 maxFileSize: null,
?
 // 啟用或禁用提取EXIF信息
 allowImageExifOrientation: true
?
 });
?
 // 使用create方法逐步增強(qiáng)基本文件輸入到FilePond元素。
 FilePond.create(inputElement)
</script>
?
</body>
</html>

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

當(dāng)然還

其它方法如： destroys：銷(xiāo)毀實(shí)例
find：返回附加提供的元素的實(shí)例
getOptions：返回當(dāng)前的配置項(xiàng)
supported：鑒別瀏覽器是否支持 FilePond

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

三、總結(jié)

以上就是講解的全部?jī)?nèi)容，F(xiàn)ilePond 是一款很輕便的上傳插件。并沒(méi)有太多繁瑣的配置，這里我并沒(méi)有逐一針對(duì)每個(gè)插件引入進(jìn)行演示，只展示了常用的部分。留意上面提示的坑，掌握上面講解的方法，其它的插件你便可自行學(xué)習(xí)。

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

References

[1] 《講解開(kāi)源項(xiàng)目》: 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

關(guān)注公眾加入交流群，一起討論有趣的技術(shù)話(huà)題

『講解開(kāi)源項(xiàng)目系列』——讓對(duì)開(kāi)源項(xiàng)目感興趣的人不再畏懼、讓開(kāi)源項(xiàng)目的發(fā)起者不再孤單。跟著我們的文章，你會(huì)發(fā)現(xiàn)編程的樂(lè)趣、使用和發(fā)現(xiàn)參與開(kāi)源項(xiàng)目如此簡(jiǎn)單。歡迎聯(lián)系我（微信：xueweihan 備注：講解）加入我們，讓更多人愛(ài)上開(kāi)源、貢獻(xiàn)開(kāi)源～

近做阿里云上傳，想把本地的文件定期刪除掉來(lái)節(jié)省服務(wù)器空間，也避免重復(fù)資源占用空間，整理了一下node的文件操作。

Node.js 文件操作功能模塊簡(jiǎn)介如下：

fs.promises // 異步操作文件
fs.stat // 判斷是文件還是文件夾
fs.unlink // 刪除文件
fs.readdir // 讀取文件夾內(nèi)容

更多詳細(xì)可查看Node.js官網(wǎng)： https://nodejs.cn/api/fs.html

操作代碼如下：

tml2pdf

pdfbox

PDFBox是一個(gè)Java庫(kù)，可用于創(chuàng)建，修改和提取PDF文件的內(nèi)容。它是一個(gè)Apache軟件基金會(huì)的項(xiàng)目，使用Apache License 2.0許可證。
PDFBox提供了一組API，可用于提取文本和圖像，添加和刪除頁(yè)面，提取PDF元數(shù)據(jù)和加密PDF文件等。

主要依賴(lài)

        <!-- 將 html 轉(zhuǎn)換為 xml 工具庫(kù) -->
        <dependency>
            <groupId>org.jsoup</groupId>
            <artifactId>jsoup</artifactId>
            <version>1.17.1</version>
        </dependency>

        <!-- 第三方 pdfbox 包裝庫(kù),提供 html 轉(zhuǎn) pdf 功能 -->
        <dependency>
            <groupId>com.openhtmltopdf</groupId>
            <artifactId>openhtmltopdf-pdfbox</artifactId>
            <version>1.0.10</version>
        </dependency>

測(cè)試代碼

        // 獲取 java 版本
        String version = System.getProperty("java.specification.version");

        // 獲取系統(tǒng)類(lèi)型
        String platform = System.getProperty("os.name", "");
        platform = platform.toLowerCase().contains("window") ? "win" : "linux";

        // 當(dāng)前程序目錄
        String current = System.getProperty("user.dir");

        System.out.println(String.format("current=%s", current));

        // html 文件路徑
        File index = Paths.get(current, "..", "index.html").toFile();
        if (!index.exists()) {
            System.out.println(String.format("file not exist,file=%s", index.getAbsolutePath()));
            return;
        }

        try {
            Document doc = Jsoup.parse(index, "UTF-8");
            // 補(bǔ)全標(biāo)記
            doc.outputSettings().syntax(Document.OutputSettings.Syntax.xml);

            File file = Paths.get(current, String.format("java%s_%s.pdf", version, platform)).toFile();
            FileOutputStream stream = new FileOutputStream(file);

            PdfRendererBuilder builder = new PdfRendererBuilder();

            // NOTE 字體問(wèn)題,文檔中出現(xiàn)過(guò)的字段,需要手動(dòng)加載字體
            builder.useFont(Paths.get(current, "..", "fonts", "simsun.ttc").toFile(), "SimSun");
            builder.useFont(Paths.get(current, "..", "fonts", "msyh.ttc").toFile(), "font-test");
            builder.useFont(Paths.get(current, "..", "fonts", "msyh.ttc").toFile(), "Microsoft YaHei UI");

            // NOTE 設(shè)置根目錄
            String baseUrl = Paths.get(current, "..").toUri().toString();
            builder.withHtmlContent(doc.html(), baseUrl);

            builder.toStream(stream);
            builder.run();
        } catch (IOException e) {
            throw new RuntimeException(e);
        }

效果預(yù)覽

pdfbox-demo/java1.8_win.pdf · yjihrp/linux-html2pdf-demo - Gitee.com

pdfbox-demo/java11_linux.pdf · yjihrp/linux-html2pdf-demo - Gitee.com

實(shí)用工具

# 查看 pdf 內(nèi)部結(jié)構(gòu)
java -jar pdfbox-app debug path-to-pdf/test.pdf
java -jar debugger-app path-to-pdf/test.pdf

測(cè)試結(jié)果

下一篇 5-LINUX HTML 轉(zhuǎn) PDF-selenium

在線(xiàn)咨詢(xún)

上一篇：HTML網(wǎng)頁(yè)中的圖形是如何對(duì)齊的？有什么方法可以使它們對(duì)齊？
下一篇：電腦換硬盤(pán) 速學(xué)系統(tǒng)+數(shù)據(jù)完美遷移

您的項(xiàng)目需求

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

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