乔克视界

主题

乔克2025-07-202025-07-23专栏GolangGin框架
549
3m
Get...

文件上传 ​

form 单文件 ​

go
package main
// 导入gin包
import (
	"fmt"
	"github.com/gin-gonic/gin"
	"log"
	"net/http"
)

func main() {
	router := gin.Default()
	// 设置文件上传大小限制，默认是32m
	router.MaxMultipartMemory = 64 << 20  // 64 MiB

	router.POST("/upload", func(c *gin.Context) {
		// 获取上传文件，返回的是multipart.FileHeader对象，代表一个文件，里面包含了文件名之类的详细信息
		// file是表单字段名字
		file, _ := c.FormFile("file")
		// 打印上传的文件名
		log.Println(file.Filename)

		// 将上传的文件，保存到./data/1111.jpg 文件中
		c.SaveUploadedFile(file, "./data/1111.jpg")

		c.String(http.StatusOK, fmt.Sprintf("'%s' uploaded!", file.Filename))
	})
	router.Run(":8080")
}

html 代码

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Single file upload</title>
  </head>
  <body>
    <h1>上传文件演示</h1>

    <form action="/upload" method="post" enctype="multipart/form-data">
      文件: <input type="file" name="file" /><br /><br />
      <input type="submit" value="上传文件" />
    </form>
  </body>
</html>

注意前端需要设置：enctype="multipart/form-data"

form 多文件 ​

后端

go
func DoFileUpload1(ctx *gin.Context)  {
	form,_ :=ctx.MultipartForm()
	files := form.File["file_name"]

	for _,file := range files{
		fmt.Println(file.Filename)
	}
	ctx.String(http.StatusOK,"OK")
}

前端：

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <body>
    <form action="/upload1" method="post" enctype="multipart/form-data">
      <input type="file" name="file_name" />
      <input type="file" name="file_name" />
      <input type="submit" />
    </form>
  </body>
</html>

注意：前端上传的 name 相同才是多文件。

ajax 单文件 ​

后端

go
func DoFileUpload1(ctx *gin.Context)  {
    file,_:=ctx.FormFile("file")
    fmt.Print(file.Filename)
	ctx.String(http.StatusOK,"OK")
}

前端

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <script src="/static/js/jquery.min.js"></script>
  </head>
  <body>
    <form>
      <input type="file" name="file_name" id="file_id" />
      <input type="button" id="button_id" />
    </form>

    <script>
      var botton_id = document.getElementById("button_id");
      button_id.onclick = function () {
        var form_data = new FormData();
        form_data.append("file", $("#file_id")[0].files[0]);
        $.ajax({
          url: "/upload1",
          type: "POST",
          data: form_data,
          contentType: false,
          processData: false,
          success: function (data) {
            alert(data["code"]);
          },
          fail: function (data) {},
        });
      };
    </script>
  </body>
</html>

ajax 多文件 ​

后端

go
func DoFileUpload1(ctx *gin.Context)  {
	form,_ :=ctx.MultipartForm()
	files := form.File["file"]

	for _,file := range files{
		fmt.Println(file.Filename)
	}
	ctx.String(http.StatusOK,"OK")
}

前端

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <script src="/static/js/jquery.min.js"></script>
  </head>
  <body>
    <form>
      <input type="file" name="file_name" id="file_id" />
      <input type="file" name="file_name" id="file_id" />
      <input type="button" id="button_id" />
    </form>

    <script>
      var botton_id = document.getElementById("button_id");
      button_id.onclick = function () {
        var form_data = new FormData();
        form_data.append("file", $("#file_id")[0].files[0]);
        form_data.append("file", $("#file_id")[1].files[0]);
        $.ajax({
          url: "/upload1",
          type: "POST",
          data: form_data,
          contentType: false,
          processData: false,
          success: function (data) {
            alert(data["code"]);
          },
          fail: function (data) {},
        });
      };
    </script>
  </body>
</html>
最近更新