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

300次阅读
没有评论

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