Image placeholder

Filepond – 文件上传 JavaScript 库

Image placeholder
F2EX 2018-04-03

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
});