filepond使用

原文链接：[八点博客](https://www.badianboke.com/)
[https://www.badianboke.com/](https://www.badianboke.com/)
 

filepond是一款上传插件。官网 Easy File Uploading With JavaScript | FilePond

基本使用

1、cdn引入

<link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>

2、html

<input type="file" class="filepond">	

 3、js

    var inputElement = document.querySelector('input[type="file"]');	

    FilePond.setOptions({	
        server: '/api/v1/my/setting/avatar',	 //上传地址
    });	

    FilePond.create(inputElement);	

使用插件

/// ///中间的内容即是比基本使用增加的部分（以预览插件preview为例）

1、cdn引入（增加插件css、js）

<link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>

///
<link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css" rel="stylesheet">	
<script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js"></script>	
///

2、html （不变）

<input type="file" class="filepond">	

 3、js

    var inputElement = document.querySelector('input[type="file"]');	


    ///   注册插件    
    FilePond.registerPlugin(	
        FilePondPluginImagePreview,	
    );	
    /// 

    FilePond.setOptions({	
        server: '/api/v1/my/setting/avatar',	 //上传地址
    });	

    FilePond.create(inputElement);	

============================ 手动分隔线 =================================

下面内容为可选配置项

1、汉化

设置label文字 具体可见 Easy File Uploading With JavaScript | FilePond    的labelsn部分

    FilePond.setOptions({	
        server: '/api/v1/my/setting/avatar?_token={{csrf_token()}}',	
        labelFileLoading: "初始化...",
        labelFileProcessing: "上传中...",
        labelTapToRetry: "重新尝试1",
        labelTapToCancel: "点击取消上传",
        labelFileProcessingComplete: "上传完成",
        labelFileProcessingAborted:"上传取消",
        labelTapToUndo:"点击右上角删除",
    });	

2、事件

初始化‘、上传

document.addEventListener('FilePond:loaded', e => {
     console.log('FilePond ready for use', e.detail);
 });
 
 document.addEventListener('FilePond:addfile', e => {
     console.log('add file', e.detail);
 });

源码中所有事件

    oninit: [null, Type.FUNCTION],
    onwarning: [null, Type.FUNCTION],
    onerror: [null, Type.FUNCTION],
    onactivatefile: [null, Type.FUNCTION],
    oninitfile: [null, Type.FUNCTION],
    onaddfilestart: [null, Type.FUNCTION],
    onaddfileprogress: [null, Type.FUNCTION],
    onaddfile: [null, Type.FUNCTION],
    onprocessfilestart: [null, Type.FUNCTION],
    onprocessfileprogress: [null, Type.FUNCTION],
    onprocessfileabort: [null, Type.FUNCTION],
    onprocessfilerevert: [null, Type.FUNCTION],
    onprocessfile: [null, Type.FUNCTION],  //文件上传完成
    onprocessfiles: [null, Type.FUNCTION],
    onremovefile: [null, Type.FUNCTION],
    onpreparefile: [null, Type.FUNCTION],
    onupdatefiles: [null, Type.FUNCTION],
    onreorderfiles: [null, Type.FUNCTION],