如何使用DropzoneJS和Go在服务器上显示现有文件

最新推荐文章于 2021-03-03 23:52:44 发布

dfsgwe1231

最新推荐文章于 2021-03-03 23:52:44 发布

阅读量270

点赞数

文章标签： javascript json ViewUI

这是DropzoneJS + Go系列文章2之2。

在本教程中，我们将向您展示在使用DropzoneJS和Go时如何在服务器上显示现有文件。本教程基于如何使用DropzoneJS和Go构建文件上传表单。在继续阅读本教程中的内容之前，请确保已阅读它。

使用go get github.com/nfnt/resize安装go包“ github.com/nfnt/resize”，我们需要它来创建缩略图。

在上一教程中。我们已经设置了正确的DropzoneJs上传表单。本教程不需要其他文件。我们需要做的是对以下文件进行一些修改：

让我们开始吧！

在上一教程中。 “ / upload”所做的只是将上载的文件存储到服务器目录“ ./public/uploads”中。因此，我们需要添加一段代码来检索存储文件的信息（名称和大小），并以JSON格式返回它。

将以下内容复制到“ main.go”。阅读评论以获取详细信息。

将下面的内容复制到“ ./views/upload.html”。我们将逐一进行修改。

我们在页面中添加了Jquery库。实际上，这不是直接针对DropzoneJs的。我们仅使用Jquery的ajax函数$ .get 。您将在下面看到
我们向表单添加了一个ID元素（my-dropzone）。这是必需的，因为我们需要将配置值传递给Dropzone。为此，我们必须有一个ID引用。这样我们就可以通过将值分配给Dropzone.options.myDropzone来配置它。配置Dropzone时，很多人会感到困惑。简单地说。不要将Dropzone用作Jquery插件，它具有自己的语法，您需要遵循它。
这开始了修改的主要部分。我们在这里所做的是传递一个函数来侦听Dropzone的init事件。初始化Dropzone时将调用此事件。
通过ajax从新的“ / uploads”检索文件详细信息。
使用服务器中的值创建模拟文件。 mockFile只是具有名称和大小属性的JavaScript对象。然后，我们显式调用Dropzone的addedfile和thumbnail函数，以将现有文件放入Dropzone上传区域并生成其缩略图。

在当前项目的目录中打开终端并执行：

$ go run main.go
Now listening on: http://localhost:8080
Application started. Press CTRL+C to shut down.

如果成功完成。现在去上传一些图像并重新加载上传页面。已上传的文件应自动显示在Dropzone区域中。

希望这个简单的教程对您的开发有所帮助。
如果您喜欢我的帖子，请在Twitter上关注我并帮助传播。我需要您的支持才能继续。

当我不止一次单击拍手按钮时，我喜欢视觉效果，是吗？很简单：只需单击拍手按钮。如果感觉强烈，请单击更多（或按住不放 ）。

关注