百度360必应搜狗淘宝本站头条
mqtt服务器xftp6mybatiscollectionkeyerrorc#var
当前位置：网站首页 > 热门文章 > 正文

Web端非常有用的一个文件上传插件——FilePond

bigegpt 2025-01-12 11:35 7 浏览

介绍

FilePond是一个JavaScript库，它提供流畅的拖放文件上传功能。可以上传任何你扔在它上面的东西，优化图像以便更快地上传，并提供一个非常优雅的、可靠的、平滑的用户体验。


Github

基于MIT开源协议

https://github.com/pqina/filepond

适配框架

核心库是用普通JavaScript编写的，因此可以在任何地方使用。可以在不同的框架中使用，提供了React、Vue、Svelte、Angular、jQuery。你可以选择和自己项目一致框架的适配库

示例实现

<input type="file" 
    class="filepond"
    name="filepond" 
    multiple 
    data-allow-reorder="true"
    data-max-file-size="3MB"
    data-max-files="3">
FilePond.registerPlugin(
  FilePondPluginImagePreview,
  FilePondPluginImageExifOrientation,
  FilePondPluginFileValidateSize,
  FilePondPluginImageEdit
);

FilePond.create(
  document.querySelector('input'),

  // 使用 Doka.js 作为图像编辑器
  imageEditEditor: Doka.create({
    utils: ['crop', 'filter', 'color']
  })
);
  • 将multiple属性添加到文件输入以创建多文件放置区域。
  • 使用data max files属性限制文件的最大数量。
  • 拖放图像，FilePond将呈现快速预览。它还可以修正手机照片定位信息。
  • 文件可以重新排序，抓取一个文件并将其拖到新的位置。



功能概述

  • 多种输入格式

支持目录、文件、blob、本地url、远程url和数据uri。

  • 多个文件源

删除文件、从文件系统中选择文件、使用API添加文件或复制和粘贴文件。

  • 异步或同步上传

使用XMLHttpRequest或store将文件发送到服务器，并使用File Encode插件将表单post作为base64提交。

  • 高可靠度

用AT软件如VoiceOver和JAWS进行测试。FilePond的用户界面可以通过键盘导航。

  • 响应式

自动缩放到可用空间。在移动和桌面设备上都可以使用。

  • 还支持以下更多特性

拖放以重新排列文件

修改标签和图标

多文件或单文件模式

从丢弃的文件夹中筛选文件

还原临时服务器文件

捕获页上丢弃的文件

删除时上载或等待用户操作

限制跌落区域高度

删除以替换当前文件

复制粘贴文件

向文件添加元数据

使用插件扩展FilePond

限制输入文件大小

限制所有文件的总大小

限制可以添加的文件类型

显示图像文件的预览

按固定比例裁剪图像

调整图像大小以适合边界框

强制将图像调整为特定大小

在客户端上应用图像转换

压缩JPEG图像

将图像转换为JPEG或PNG

信息读取方向图像

Base64编码文件

总结

FilePond是一个值得尝试的工具，在文件上传体验上比很多第三方插件好得多，而且功能不俗，enjoy it！

相关推荐

10w qps缓存数据库——Redis（redis缓存调优）

一、Redis数据库介绍：Redis：非关系型缓存数据库nosql：非关系型数据库没有表，没有表与表之间的关系，更不存在外键存储数据的形式为key：values的形式c语言写的服务（监听端口），用来存...

Redis系列专题4--Redis配置参数详解

本文基于windowsX64，3.2.100版本讲解，不同版本默认配置参数不同在Redis中，Redis的根目录中有一个配置文件（redis.conf，windows下为redis.windows....

开源一夏 | 23 张图，4500 字从入门到精通解释 Redis

redis是目前出场率最高的NoSQL数据库，同时也是一个开源的数据结构存储系统，在缓存、数据库、消息处理等场景使用的非常多，本文瑞哥就带着大家用一篇文章入门这个强大的开源数据库——Redis。...

redis的简单与集群搭建（redis建立集群）

Redis是什么？是开源免费用c语言编写的单线程高性能的（key-value形式）内存数据库，基于内存运行并支持持久化的nosql数据库作用主要用来做缓存，单不仅仅是做缓存，比如：redis的计数器生...

推荐几个好用Redis图形化客户端工具

RedisPlushttps://gitee.com/MaxBill/RedisPlusRedisPlus是为Redis可视化管理开发的一款开源免费的桌面客户端软件，支持Windows、Linux...

关于Redis在windows上运行及fork函数问题

Redis在将数据库进行持久化操作时，需要fork一个进程，但是windows并不支持fork，导致在持久化操作期间，Redis必须阻塞所有的客户端直至持久化操作完成。微软的一些工程师花费时间在解决在...

你必须懂的Redis十大应用场景（redis常见应用场景）

Redis作为一款高性能的键值存储数据库，在互联网业务中有着广泛的应用。今天，我们就来详细盘点一下Redis的十大常用业务场景，并附上Golang的示例代码和简图，帮助大家更好地理解和应用Redis。...

极简Redis配置（redis的配置）

一、概述Redis的配置文件位于Redis安装目录下，文件名为redis.conf(Windows名为redis.windows.conf，linux下的是redis.conf)你可以通过C...

什么是redis，怎么启动及如何压测

从今天起咱们一起来学习一下关于“redis监控与调优”的内容。一、Redis介绍Redis是一种高级key-value数据库。它跟memcached类似，不过数据可以持久化，而且支持的数据类型很丰富。...

一款全新Redis UI可视化管理工具，支持WebUI和桌面——P3X Redis UI

介绍P3XRedisUI这是一个非常实用的RedisGUI，提供响应式WebUI访问或作为桌面应用程序使用，桌面端是跨平台的，而且完美支持中文界面。Githubhttps://github....

windows系统的服务器快速部署java项目环境地址

1、mysql:https://dev.mysql.com/downloads/mysql/（msi安装包）2、redis:https://github.com/tporadowski/redis/r...

window11 下 redis 下载与安装（windows安装redis客户端）

#热爱编程是一种怎样的体验#window11下redis下载与安装1）各个版本redis下载(windows)https://github.com/MicrosoftArchive/r...

一款轻量级的Redis客户端工具，贼好用!

使用命令行来操作Redis是一件非常麻烦的事情，我们一般会选用客户端工具来操作Redis。今天给大家分享一款好用的Redis客户端工具TinyRDM，它的界面清新又优雅，希望对大家有所帮助！简介Ti...

一个.NET开发且功能强大的Windows远程控制系统

我们致力于探索、分享和推荐最新的实用技术栈、开源项目、框架和实用工具。每天都有新鲜的开源资讯等待你的发现！项目介绍SiMayRemoteMonitorOS是一个基于Windows的远程控制系统，完...

Redis客户端工具详解(4款主流工具)

大家好，我是mikechen。Redis是大型架构的基石，也是大厂最爱考察内容，今天就给大家重点详解4款Redis工具@mikechen本篇已收于mikechen原创超30万字《阿里架构师进阶专题合集...

一周热门
最近发表
标签列表