Filepond小白攻略_文件上传 JavaScript 库

Filepond小白攻略

官方网址:https://pqina.nl/filepond

Filepond小白攻略_文件上传 JavaScript 库

GitHub:https://github.com/pqina/filepond

简介描述:文件上传 JavaScript 库

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>
海计划公众号
(0)
上一篇 2020/03/06 08:32
下一篇 2020/03/06 08:32

您可能感兴趣的内容

  • 封装axios菜鸟教程_axios菜鸟知识

    1、创建一个server目录,在该目录下创建index.js文件2、配置axios:import axios from ‘axios’
    //使用create方法创建axios实例
    export const Service = axios.create({timeout: 6000, // 请求超时时间baseURL: process.env.BASE_API

    2020/03/23
  • javascript代码语句结束要不要加分号?小白指南_代码基础知识教程

    在 C 语言中,分号是语句结束的标志,在语句结束的地方一定要以分号结束。而 JavaScript 的分号却是可选的,若语句都各占一行,则可以省略分号。JavaScript 中的 ASI 机制,允许我们省略分号。ASI 机制不是说在解析过程中解析器自动把分号添加到代码中,而是说解析器除了分号还会以换行为基础按一定的规则作为断句的依据,从而保证解析的正确性。AS

    2020/03/20
  • nodetype中值1、2、3分别代表什么意思入门基础教程_节点基础知识

    nodetype中值1、2、3分别代表什么意思入门基础教程 JavaScript中的所有节点类型都继承自Node类型,因此所有节点类型都共享相同的基本属性和方法。每个节点都有一个n…

    2020/03/20
  • Js即将加入私有字段和私有方法菜鸟教程下载_类入门教程

    尽管 JavaScript 在 2015 年就有了类,但仍然没有私有字段和私有方法。由于 TC39 委员会 内部存在分歧,这些功能在最初版本中被取消。有三个规范草案打算在不久的将来将这些功能引入到 JavaScript 类中。一旦这些规范被正式接受,就可以使用“#”符号来定义私有字段和私有方法。之所以决定使用‘#’符号而不是传统的下划线“_”,是为了避免对现

    2020/03/23
  • LESS 原理,一款css的预处理程序Less的使用指南教程_less入门基础

    ​Less一种动态样式语言,LESS将CSS赋予了动态语言的特性,如变量,继承,运算,函数…LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox),也可以借助Node.js或者Rhino在服务端运行。安装与使用://客户端引用
    <link rel="stylesheet/less" type="text/css" href=

    2020/04/06
  • webpack中loader加载器的使用及原理小白攻略_loader教程视频

    webpack的loaders是一块很重要的组成部分。我们都知道webpack是用于资源打包的,里面的所有资源都是“模块”,内部实现了对模块资源进行加载的机制。但是Webpack本身只能处理 js模块,如果要处理其他类型的文件,就需要使用 loader 进行转换。 Loader 可以理解为是模块和资源的转换器,它本身是一个函数,接受源文件作为参数,返回转换的

    2020/04/06
  • RAWGraphs入门基础_一个开源数据可视化框架

    RAWGraphs入门基础 官方网址:https://rawgraphs.io GitHub:https://github.com/densitydesign/raw 简介描述:一…

    2020/03/06
  • vuedraggable:vue拖拽排序插件基础入门_插件入门指南

    最近做的项目要用到拖拽排序,我现在的项目是vue项目,所以我就屁颠屁颠的去百度有木有这样功能的插件,我就知道一定会有,那就是vuedraggable,这是一款很棒的拖拽插件,下面我来说一下怎么引入首先在vue项目中,用npm包下载下来npm install vuedraggable -S下载下来后,引入插件,在你的vue文件的script标签里面这样引入im

    2020/03/23
  • tinydate菜鸟教程网_一个微小(337B)可复重日期格式化程序。 非常快!

    tinydate菜鸟教程网 官方网址:https://jsfiddle.net/lukeed/aoy0xeze/ GitHub:https://github.com/lukeed/…

    2020/03/11
  • HTML5和Web前端有什么区别?入门指南_区别菜鸟教程

    很多小伙伴都知道HTML5这个概念,但是具体不知道是做什么的,今天我们就来给大家普及一下HTML5和web前端的关系和区别。什么是HTML5?HTML5其实是一种技术的集合,它包括了HTML5,CSS3,JS等技术。而Web前端则是一种职业,国内从2005年开始发展的,是由网页设计师演变过来的。如果从技术上说,Web前端涉及到的技术有很多,包括HTML5,除

    2020/03/20
  • Node.js中的路径问题基础知识_路径入门基础教程

    在前端学习过程中,涉及到路径的问题非常多,相对路径,绝对路径等。有时候明明觉得没问题,但是还是会出错。或者说线下没问题,但是到了线上就出现问题,因此弄懂路径问题,非常关键。我们需要知道为什么这个地方既可以使用相对路径,又可以使用绝对路径,为什么有些地方只能使用绝对路径。一、Node.js中加载模块的路径设置const myClass = require(‘.

    2020/03/30
  • JS多态封装继承小白知识_封装小白常识

    前言JS是一种基于对象的语言,在JS中几乎所有的东西都可以看成是一个对象,但是JS中的对象模型和大多数面向对象语言的对象模型不太一样,因此理解JS中面向对象思想十分重要,接下来本篇文章将从多态、封装、继承三个基本特征来理解JS的面向对象思想多态含义同一操作作用于不同的对象上面,可以产生不同的解释和不同的执行结果,也就是说,给不同的对象发送同一个消息时,这些对

    2020/03/23
  • JavaScript中发出HTTP请求最常用的方法指南教程_请求小白攻略

    JavaScript具有很好的模块和方法来发送可用于从服务器端资源发送或接收数据的HTTP请求。在本文中,我们将介绍一些在JavaScript中发出HTTP请求的流行方法。AjaxAjax是发出异步HTTP请求的传统方式。可以使用HTTP POST方法发送数据,并使用HTTP GET方法接收数据。我们来看看发送GET请求。我将使用JSONPlaceholde

    2020/03/23
  • JSONPlaceholder攻略教程_一个提供免费的在线 REST API 的网站

    JSONPlaceholder攻略教程 官方网址:http://jsonplaceholder.typicode.com/ GitHub:https://github.com/ty…

    2020/03/06
  • 通过实例学习正则表达式菜鸟教程_正则新手入门

    判断邮箱是否正确邮箱正则/\w+[\w\.]*@[\w\.]+\.\w+/测试用例const regex = /\w+[\w\.]*@[\w\.]+\.\w+/regex.test(‘666@email.com’) // true
    regex.test(‘july@e.c’) // true

    2020/03/24
  • ng2-toasty入门教程_一个angular的消息提示组件

    ng2-toasty入门教程 GitHub:https://github.com/akserg/ng2-toasty 简介描述:一个angular的消息提示组件 这是一个angul…

    2020/03/11