form单文件

  1. package main
  2. // 导入gin包
  3. import (
  4.     "fmt"
  5.     "github.com/gin-gonic/gin"
  6.     "log"
  7.     "net/http"
  8. )
  10. func main() {
  11.     router := gin.Default()
  12.     // 设置文件上传大小限制，默认是32m
  13.     router.MaxMultipartMemory = 64 << 20  // 64 MiB
  15.     router.POST("/upload", func(c *gin.Context) {
  16.         // 获取上传文件，返回的是multipart.FileHeader对象，代表一个文件，里面包含了文件名之类的详细信息
  17.         // file是表单字段名字
  18.         file, _ := c.FormFile("file")
  19.         // 打印上传的文件名
  20.         log.Println(file.Filename)
  22.         // 将上传的文件，保存到./data/1111.jpg 文件中
  23.         c.SaveUploadedFile(file, "./data/1111.jpg")
  25.         c.String(http.StatusOK, fmt.Sprintf("'%s' uploaded!", file.Filename))
  26.     })
  27.     router.Run(":8080")
  28. }

html代码

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>Single file upload</title>
  6. </head>
  7. <body>
  8. <h1>上传文件演示</h1>
  10. <form action="/upload" method="post" enctype="multipart/form-data">
  11.     文件: <input type="file" name="file"><br><br>
  12.     <input type="submit" value="上传文件">
  13. </form>
  14. </body>
  15. </html>

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

form多文件

后端

  1. func DoFileUpload1(ctx *gin.Context)  {
  2.     form,_ :=ctx.MultipartForm()
  3.     files := form.File["file_name"]
  5.     for _,file := range files{
  6.         fmt.Println(file.Filename)
  7.     }
  8.     ctx.String(http.StatusOK,"OK")
  9. }

前端：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <form action="/upload1" method="post" enctype="multipart/form-data">
  9.     <input type="file" name="file_name">
  10.     <input type="file" name="file_name">
  11.     <input type="submit">
  12. </form>
  13. </body>
  14. </html>

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

ajax单文件

后端

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

前端

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="/static/js/jquery.min.js"></script>
  7. </head>
  8. <body>
  9. <form>
  10.     <input type="file" name="file_name" id="file_id">
  11.     <input type="button" id="button_id">
  12. </form>
  14. <script>
  15.   var botton_id = document.getElementById("button_id")
  16.   button_id.onclick = function(){
  17.      var form_data = new FormData();
  18.      form_data.append("file",$("#file_id")[0].files[0]);
  19.     $.ajax({
  20.       url:"/upload1",
  21.       type:"POST",
  22.       data:form_data,
  23.       contentType: false,
  24.       processData: false,
  25.       success:function(data){
  26.          alert(data["code"])
  27.       },
  28.       fail:function(data){}
  29.     })
  30.   }
  31. </script>  
  32. </body>
  33. </html>

ajax多文件

后端

  1. func DoFileUpload1(ctx *gin.Context)  {
  2.     form,_ :=ctx.MultipartForm()
  3.     files := form.File["file"]
  5.     for _,file := range files{
  6.         fmt.Println(file.Filename)
  7.     }
  8.     ctx.String(http.StatusOK,"OK")
  9. }

前端

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="/static/js/jquery.min.js"></script>
  7. </head>
  8. <body>
  9. <form>
  10.     <input type="file" name="file_name" id="file_id">
  11.   <input type="file" name="file_name" id="file_id">
  12.     <input type="button" id="button_id">
  13. </form>
  15. <script>
  16.   var botton_id = document.getElementById("button_id")
  17.   button_id.onclick = function(){
  18.      var form_data = new FormData();
  19.      form_data.append("file",$("#file_id")[0].files[0]);
  20.     form_data.append("file",$("#file_id")[1].files[0]);
  21.     $.ajax({
  22.       url:"/upload1",
  23.       type:"POST",
  24.       data:form_data,
  25.       contentType: false,
  26.       processData: false,
  27.       success:function(data){
  28.          alert(data["code"])
  29.       },
  30.       fail:function(data){}
  31.     })
  32.   }
  33. </script>  
  34. </body>
  35. </html>