Filepond - 一个灵活有趣的JavaScript文件上传库

2024-05-11 代码工坊猿宝优质项目

　　一个 JavaScript 库，可以上传您扔给它的任何内容，优化图像以加快上传速度，并提供出色、可访问、丝般流畅的用户体验。

　　FilePond 适配器可用于React、Vue、Angular、Svelte和jQuery

核心特点

　　接受目录、文件、blob、本地 URL、远程 URL和数据 URI。

　　拖放文件、在文件系统上选择、复制和粘贴文件或使用 API 添加文件。

　　使用 AJAX异步上传，支持块上传，可以将文件编码为 Base64 数据并以表单形式发送。

　　可访问，通过 VoiceOver 和 JAWS 等 AT 软件进行测试，可通过键盘导航。

　　图像优化、自动图像调整大小、裁剪、过滤和修复 EXIF 方向。

　　响应式，自动缩放到可用空间，在移动和桌面设备上均可用。

使用方式

<!DOCTYPE html>
<html>
<head>
  <title>FilePond from CDN</title>

  <!-- Filepond stylesheet -->
  <link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">

</head>
<body>

  <!-- We'll transform this input into a pond -->
  <input type="file" class="filepond">

  <!-- Load FilePond library -->
  <script src="https://unpkg.com/filepond/dist/filepond.js"></script>

  <!-- Turn all file input elements into ponds -->
  <script>
  FilePond.parse(document.body);
  </script>

</body>
</html>

项目官网：https://pqina.nl/filepond/

GITHUB：https://github.com/pqina/filepond