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

• 第1部分：如何构建文件上传表单
• 第2部分：如何在服务器上显示现有文件

DropzoneJS + Go：如何显示服务器上的现有文件

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

表中的内容

• 制备
• 修改服务器端
• 修改客户端
• 参考文献
• 结束

制备

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

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

1. main.go
2. views / upload.html

让我们开始吧！

修改服务器端

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

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

修改客户端

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

1. 我们在页面中添加了Jquery库。 实际上，这不是直接针对DropzoneJs的。 我们仅使用Jquery的ajax函数$ .get 。 您将在下面看到
2. 我们向表单添加了一个ID元素（my-dropzone）。 这是必需的，因为我们需要将配置值传递给Dropzone。 为此，我们必须有一个ID引用。 这样我们就可以通过将值分配给Dropzone.options.myDropzone来配置它。 配置Dropzone时，很多人会感到困惑。 简单地说。 不要将Dropzone用作Jquery插件，它具有自己的语法，您需要遵循它。
3. 这开始了修改的主要部分。 我们在这里所做的是传递一个函数来侦听Dropzone的init事件。 初始化Dropzone时将调用此事件。
4. 通过ajax从新的“ / uploads”检索文件详细信息。
5. 使用服务器中的值创建模拟文件。 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区域中。

参考文献

• http://www.dropzonejs.com/#server-side-implementation
• https://www.startutorial.com/articles/view/how-to-build-a-file-upload-form-using-dropzonejs-and-php
• https://docs.iris-go.com
• https://github.com/kataras/iris/tree/master/_examples/tutorial/dropzonejs

结束

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

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

From: https://hackernoon.com/how-to-display-existing-files-on-server-using-dropzonejs-and-go-53e24b57ba19