[推荐]filepond 文件上传 9.6K start 可编辑图片 · PHP/Python/前端/Linux 等等 学习笔记 · 看云
[TOC]
> [github](https://github.com/pqina/filepond)
> [home](https://pqina.nl/filepond/)
## 概述
* 五分钟安装
* 设置裁剪蒙版和指南
* 定义宽高比选项
* 旋转，调整大小和翻转图像
* 添加标记和注释
* 颜色调整控件
* 应用滤镜效果
## 特点
### 多种输入格式
接受目录，文件，blob，本地URL，远程URL和数据URI。
### 异步或同步上传
### 多个文件源
删除文件，从文件系统中选择文件，使用API添加文件或复制和粘贴文件。
### 图像优化
在客户端上自动调整大小和裁剪图像可以节省服务器带宽，并大大提高了上传速度。
## 支持框架
Vue, jQuery ,React, Angular
## 插件
* [File encode](https://github.com/pqina/filepond-plugin-file-encode)
* [File rename](https://github.com/pqina/filepond-plugin-file-rename)
* [File size validation](https://github.com/pqina/filepond-plugin-file-validate-size)
* [File type validation](https://github.com/pqina/filepond-plugin-file-validate-type)
* [File metadata](https://github.com/pqina/filepond-plugin-file-metadata)
* [File poster](https://github.com/pqina/filepond-plugin-file-poster)
* [Image editor](https://github.com/pqina/filepond-plugin-image-edit)
* [Image size validation](https://github.com/pqina/filepond-plugin-image-validate-size)
* [Image preview](https://github.com/pqina/filepond-plugin-image-preview)
* [Image crop](https://github.com/pqina/filepond-plugin-image-crop)
* [Image filter](https://github.com/pqina/filepond-plugin-image-filter)
* [Image resize](https://github.com/pqina/filepond-plugin-image-resize)
* [Image transform](https://github.com/pqina/filepond-plugin-image-transform)
* [Image EXIF orientation](https://github.com/pqina/filepond-plugin-image-exif-orientation)
* [Image overlay](https://github.com/nielsboogaard/filepond-plugin-image-overlay)(third-party)
* [Media preview](https://github.com/nielsboogaard/filepond-plugin-media-preview)(third-party)
* [Get file](https://github.com/nielsboogaard/filepond-plugin-get-file)(third-party)
## demo
```
<!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>
```