javascript文件上传库filepond
# javascript 文件上传库 filepond
本文讲解 javascript 文件上传库 filepond 的基本用法。filepond 支持 npm、cdn 方式使用,同时有适配 vue、react 等主流框架的衍生版本。filepond 还提供了很多的插件。
# 最简单的文件上传示例
本示例的功能:浏览本地任意类型的文件,并自动调用接口实现上传。
提示
将图片上传接口地址改为实际接口地址即可。
<!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> <!--FilePondPluginFileValidateSize 大小限制--> <script src="https://unpkg.com/filepond-plugin-file-validate-size/dist/filepond-plugin-file-validate-size.js"></script> <!-- Turn all file input elements into ponds --> <script> /* * 注册插件 */ FilePond.registerPlugin( FilePondPluginFileValidateSize // 文件大小限制 ); FilePond.setOptions({ server: { // 图片上传接口地址 url: "http://imgupload.demo.com/upload", process: { // 处理图片上传接口的返回内容 onload: function(response) { var resp = JSON.parse(response); console.log("resp:", resp); } } } }); FilePond.create(document.querySelector("input"), { allowFileSizeValidation: true, // 启用文件大小限制 maxFileSize: "10000KB", // 单个文件大小限制 maxTotalFileSize: "10MB", // 所有文件的总大小限制 labelMaxFileSize: "最大的文件大小为{filesize}" }); </script> </body> </html>
Copied!
# 自定义上传按钮的 label 提示文字
默认的提示文字为:Drag Drop your files or Browse
可以通过配置 labelIdle 即可实现。样例如下:
<!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> <!--FilePondPluginFileValidateSize 大小限制--> <script src="https://unpkg.com/filepond-plugin-file-validate-size/dist/filepond-plugin-file-validate-size.js"></script> <!-- Turn all file input elements into ponds --> <script> /* * 注册插件 */ FilePond.registerPlugin( FilePondPluginFileValidateSize // 文件大小限制 ); FilePond.setOptions({ server: { // 图片上传接口地址 url: "http://imgupload.demo.com/upload", process: { // 处理图片上传接口的返回内容 onload: function(response) { var resp = JSON.parse(response); console.log("resp:", resp); } } }, // 自定义上传按钮的提示文字 labelIdle: '<span class="filepond--label-action">上传文件</span>', }); FilePond.create(document.querySelector("input"), { allowFileSizeValidation: true, // 启用文件大小限制 maxFileSize: "10000KB", // 单个文件大小限制 maxTotalFileSize: "10MB", // 所有文件的总大小限制 labelMaxFileSize: "最大的文件大小为{filesize}" }); </script> </body> </html>
Copied!
上次更新: 2020-09-18 18:28:18