功能強大的 JS 文件上傳庫：FilePond

者：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 備注：講解）加入我們，讓更多人愛上開源、貢獻開源～

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

Node.js 文件操作功能模塊簡介如下：

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

更多詳細可查看Node.js官網： https://nodejs.cn/api/fs.html

操作代碼如下：

tml2pdf

pdfbox

PDFBox是一個Java庫，可用于創建，修改和提取PDF文件的內容。它是一個Apache軟件基金會的項目，使用Apache License 2.0許可證。
PDFBox提供了一組API，可用于提取文本和圖像，添加和刪除頁面，提取PDF元數據和加密PDF文件等。

主要依賴

        <!-- 將 html 轉換為 xml 工具庫 -->
        <dependency>
            <groupId>org.jsoup</groupId>
            <artifactId>jsoup</artifactId>
            <version>1.17.1</version>
        </dependency>

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

測試代碼

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

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

        // 當前程序目錄
        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");
            // 補全標記
            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 字體問題,文檔中出現過的字段,需要手動加載字體
            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 設置根目錄
            String baseUrl = Paths.get(current, "..").toUri().toString();
            builder.withHtmlContent(doc.html(), baseUrl);

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

效果預覽

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

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

實用工具

# 查看 pdf 內部結構
java -jar pdfbox-app debug path-to-pdf/test.pdf
java -jar debugger-app path-to-pdf/test.pdf

測試結果

下一篇 5-LINUX HTML 轉 PDF-selenium

在線咨詢

上一篇：HTML網頁中的圖形是如何對齊的？有什么方法可以使它們對齊？
下一篇：電腦換硬盤速學系統+數據完美遷移

您的項目需求

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

整合營銷服務商