Filepond 是一个用于文件上传的 JavaScript 库,可以上传任何内容,优化图像以获得更快的上传速度,并提供一个出色的,可访问的,流畅的用户体验。
Filepond 提供了多种上传方式:拖放,复制和粘贴文件,浏览文件系统或仅使用库的API。 gzip 压缩后仅有 21KB ,并且内置了图像优化和图像自动调整功能。
Filepond 适用于 React , Vue , Angular 和 jQuery 。
用法
使用npm安装:
npm install filepond
导入你的项目:
import * as FilePond from 'filepond';
// 创建一个多文件上传组件
const pond = FilePond.create({
multiple: true,
name: 'filepond'
});
// 将它添加到DOM
document.body.appendChild(pond.element);
或者使用 CDN (或本地)引入文件:
<!DOCTYPE html>
<html>
<head>
<title>FilePond CDN</title>
<!-- Filepond 样式文件 -->
<link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
</head>
<body>
<!-- 我们将把这个输入转换成一个 pond -->
<input type="file" class="filepond">
<!-- FilePond js文件 -->
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>
<!-- 将所有输入元素转换为 ponds -->
<script>
FilePond.parse(document.body);
</script>
</body>
</html>
示例
多文件上传:
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”WXavEx” default_tab=”result” user=”rikschennink”]See the Pen FilePond Multiple File Upload by Rik Schennink (@rikschennink) on CodePen.[/codepen_embed]
将 multiple
属性添加到 input
以创建多文件放置区域。
使用 data-max-files
属性限制文件的最大数量。
当拖拽上传一个图像,FilePond 将为该图像呈现一个快速预览。
HTML
<input type="file" class="filepond" name="filepond" multiple data-max-file-size="3MB" data-max-files="3" />
CSS
.filepond--drop-label {
color: #4c4e53;
}
.filepond--label-action {
text-decoration-color: #babdc0;
}
.filepond--panel-root {
border-radius: 2em;
background-color: #edf0f4;
height: 1em;
}
.filepond--item-panel {
background-color: #595e68;
}
.filepond--drip-blob {
background-color: #7f8a9a;
}
JavaScript
/*
如果想要预览图像,需要注册图像预览插件
*/
FilePond.registerPlugin(
// 将该文件编码为 base64 data
FilePondPluginFileEncode,
// 验证文件的大小
FilePondPluginFileValidateSize,
// 纠正移动图像的方向
FilePondPluginImageExifOrientation,
// 预览图像
FilePondPluginImagePreview
);
// 选择input并使用create()将其变成 pond
FilePond.create(document.querySelector("input"));
图像上传:
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”EQOLYe” default_tab=”result” user=”rikschennink”]See the Pen FilePond Profile Picture Upload by Rik Schennink (@rikschennink) on CodePen.[/codepen_embed]
该示例可用于个人资料图片上传。
图像会自动裁剪为1:1的纵横比,并缩放以适合200×200边框。
如果你不小心将图像拖到上传区域以外的浏览器窗口中,FilePond 将会阻止浏览器打开它。
在这个例子中,图像以 base64 格式存储,因此可以使用表单发送。
HTML
<input type="file" class="filepond" name="filepond" accept="image/png, image/jpeg, image/gif" />
CSS
.filepond--drop-label {
color: #4c4e53;
}
.filepond--label-action {
text-decoration-color: #babdc0;
}
.filepond--panel-root {
background-color: #edf0f4;
}
.filepond--item-panel {
background-color: #595e68;
}
.filepond--drip-blob {
background-color: #7f8a9a;
}
.filepond {
width: 170px;
height: 170px;
padding: 0;
overflow: hidden;
}
.filepond--root,
.filepond--image-preview-wrapper {
border-radius: 9999px;
}
.filepond--list {
left: 0;
right: 0;
}
.filepond--drop-label {
bottom: 0;
margin: 0;
display: flex;
align-items: center;
}
.filepond--file-info {
display: none;
}
.filepond--file-action-button {
display: none;
}
.filepond--image-preview-overlay {
display: none;
}
.filepond--item-panel {
display: none;
}
.filepond--file .filepond--action-remove-item {
display: block;
bottom: 1em;
left: calc(50% - 0.8125em);
}
.filepond--file .filepond--progress-indicator {
top: auto;
right: calc(50% - 0.625em);
bottom: 1.1875em;
}
JavaScript
/*
我们需要注册所需的插件来进行图像处理和预览。
*/
FilePond.registerPlugin(
// 将该文件编码为 base64 data
FilePondPluginFileEncode,
// 验证输入类型
FilePondPluginFileValidateType,
// 纠正移动图像的方向
FilePondPluginImageExifOrientation,
// 预览图像
FilePondPluginImagePreview,
// 将图像按照一定的宽高比裁剪
FilePondPluginImageCrop,
// 调整图像大小以适应特定尺寸
FilePondPluginImageResize,
// 在客户端应用裁剪和调整信息
FilePondPluginImageTransform
);
//选择 input 并使用 create() 将它变成 pond
//在这个例子中,我们传递属性和 create 方法
//我们也可以将这些放在 input 元素本身上
FilePond.create(document.querySelector("input"), {
labelIdle: `Drag & Drop your picture or Browse`,
imagePreviewHeight: 170,
imageCropAspectRatio: "1:1",
imageResizeTargetWidth: 200,
imageResizeTargetHeight: 200
});