[推薦]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> ```