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

998次阅读
没有评论

共计 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协议发布,转载请注明出处。
评论(没有评论)