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

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

DropzoneJS + Go：如何构建文件上传表单

DropzoneJS是一个开放源代码库，提供带有图像预览的拖放文件上传。 这是一个很棒的JavaScript库，实际上甚至不依赖JQuery。
在本教程中，我们将使用DropzoneJS构建多文件上传表单，后端将由Go和Iris处理。

表中的内容

• 制备
• 使用DropzoneJS
• 使用Go

制备

1. 下载Go（Golang） ，如此处所示设置计算机，然后继续执行2。
2. 安装虹膜 ; 打开一个终端并执行go get -u github.com/kataras/iris
3. 从此URL下载DropzoneJS。 DropzoneJS不依赖JQuery，您不必担心，升级JQuery版本会破坏您的应用程序。
4. 如果要一些已经制作好的CSS，请从此URL下载dropzone.css。
5. 创建一个文件夹“ ./public/uploads”，该文件夹用于存储上传的文件。
6. 创建文件“ ./views/upload.html”，该文件用于首页。
7. 创建一个文件“ ./main.go”，用于处理后端文件上传过程。

准备之后，您的文件夹和文件结构应如下所示：

使用DropzoneJS

打开文件“ ./views/upload.html”，让我们创建一个DropzoneJs表单。

将下面的内容复制到“ ./views/upload.html”，我们将逐一逐行检查代码。

1. 包括CSS样式表。
2. 包括DropzoneJS JavaScript库。
3. 用CSS类“ dropzone”创建一个上传表单，“ action”是路径路径“ / upload”。 请注意，我们确实为后备模式创建了一个输入字段。 这全部由DropzoneJS库本身处理。 我们需要做的就是将CSS类“ dropzone”分配给表单。 默认情况下，DropzoneJS将查找所有带有“ dropzone”类的表单，并自动将其自身附加到该表单。

使用Go

现在，您已经进入了教程的最后一部分。 在本节中，我们会将从DropzoneJS发送的文件存储到“ ./public/uploads”文件夹中。

打开“ main.go”并复制以下代码：

1. 创建一个新的Iris应用。
2. 从“视图”文件夹中注册并加载模板。
3. 设置“ / public”路由路径以静态服务./public/…文件夹的内容
4. 创建一条路线以服务于上传表单。
5. 创建一条路由来处理DropzoneJS表单中的POST表单数据
6. 为目标文件夹声明一个变量。
7. 如果将文件发送到页面，则将文件对象存储到一个临时的“ file”变量中。
8. 根据uploadsDir +上传的文件名将上传的文件移动到目标位置。

运行服务器

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

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

现在转到浏览器，并导航到http：// localhost：8080 ，您应该能够看到如下页面：

单击此处前进到第2部分。

我要亲自感谢dev.to小组在其Twitter帐户上分享我的新文章！

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

From: https://hackernoon.com/how-to-build-a-file-upload-form-using-dropzonejs-and-go-8fb9f258a991