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>

# 自定义上传按钮的 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>

#filepond #文件上传

上次更新: 2020-09-18 18:28:18

← javascript动态插入html片段富文本编辑器TinyMCE的基础用法→