高大上的模块化文件上传js插件:uppy

1,845次阅读
没有评论

共计 774 个字符,预计需要花费 2 分钟才能阅读完成。

uppy 是一款模块化的文件上传插件,支持上传进度,在线预览等多个功能,并且能从本地磁盘、Dropbox、Instagram、远程 URL、Google 云端硬盘、摄像机和其他位置导入文件。
而且支持多种本地化语言插件,可以很好的支持中文界面。

高大上的模块化文件上传 js 插件:uppy
演示效果

对于接入方式,同样是非常的方便,以下是一个 demo 示范:

<html>
  <head>
    <meta charset="utf-8">
    <title>Uppy</title>
    <link href="/uppy.min.css" rel="stylesheet">
  </head>
  <body>
    <div id="drag-drop-area"></div>

    <script src="/uppy.min.js"></script>
    <script>
      var uppy = Uppy.Core()
        .use(Uppy.Dashboard, {
          inline: true,
          target: '#drag-drop-area'
        })
        .use(Uppy.Tus, {endpoint: 'upload.php'})

      uppy.on('complete', (result) => {console.log('Upload complete! We’ve uploaded these files:', result.successful)
      })
    </script>
  </body>
</html>

完后 js 和 css 导入后,刷新界面,就能看到上图的演示效果

如果您的界面还不是中文的话,需要导入一个中文语言包:

需要先去官网下载 zh_CN.min.js

<script src="/zh_CN.min.js"></script>

<script>
var uppy = Uppy.Core({
  debug: true,
  locale: Uppy.locales.zh_CN
})
</script>

配置完成语言包,将会得出中文界面。

正文完
加入官方交流QQ群:778957856
post-qrcode
 1
clark
版权声明:本站原创文章,由 clark 于2021-11-20发表,共计774字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)

clark

最新文章
macos Shadowrocket与本地DNS冲突

macos Shadowrocket与本地DNS冲突

开着 Shadowrocket,本地 dns 全部失效,都走了代理,无法访问,关闭 Shadowrocket ...
openwrt Tailscale外网不通,以及部分必要设置

openwrt Tailscale外网不通,以及部分必要设置

搭建好 openwrt 之后,为了能够外网远程访问,搭配 Tailscale 可完美实现,由于首次配置,会遇到...
告别复杂配置:用Tailscale Peer Relay打造更快、更简单的内网网络

告别复杂配置:用Tailscale Peer Relay打造更快、更简单的内网网络

如果你在国内直接使用过 Tailscale,大概率会对它的连接速度有所体会。想要获得稳定可用的体验,自建 DE...

赞助广告