通知短信+运营短信,5秒速达,支持群发助手一键发送🚀高效触达和通知客户 广告
[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> ```