功能强大的 JS 文件上传库：FilePond

2021-12-13 21:52:52

一、介绍

1.1 FilePond

它是一个 JavaScript 文件上传库。可以拖入上传文件，并且会对图像进行优化以加快上传速度。让用户体验到出色、进度可见、如丝般顺畅的用户体验。

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

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 href="https://unpkg.com/filepond/dist/filepond.css" 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>

资源搜索网站大全 https://www.renrenfan.com.cn 广州VI设计公司https://www.houdianzi.com

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 方向信息
Image Size Validation：限制要添加的图像的尺寸
Image Filter：将颜色矩阵应用于图像像素

下面我来介绍如何引入插件吧！

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

<head>
  <!-- 引入图像预览插件的css文件 -->
  <link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css" 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 href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
    <!--    FilePondPluginImagePreview 插件 CSS-->
    <link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css" rel="stylesheet">
    <!--    FilePondPluginImageEdit 插件 CSS-->
    <link href="https://unpkg.com/filepond-plugin-image-edit/dist/filepond-plugin-image-edit.css" 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>