[推荐]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>  <link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">  <link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css" rel="stylesheet">  <link href="https://unpkg.com/filepond-plugin-image-edit/dist/filepond-plugin-image-edit.css" rel="stylesheet"> </head> <body>  <input type="file" class="filepond">  <script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js"></script>  <script src="https://unpkg.com/filepond-plugin-image-edit/dist/filepond-plugin-image-edit.js"></script>  <script src="https://unpkg.com/filepond-plugin-file-validate-size/dist/filepond-plugin-file-validate-size.js"></script>  <script src="https://unpkg.com/filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type.js"></script>  <script src="https://unpkg.com/filepond-plugin-image-crop/dist/filepond-plugin-image-crop.js"></script>  <script src="https://unpkg.com/filepond-plugin-image-exif-orientation/dist/filepond-plugin-image-exif-orientation.js"></script>  <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> ```