go语言web开发10 - form表单上传文件与ajax上传文件

一、form表单上传文件

1.1、路由设置

beego.Router("/form_upload", &controllers.FormUploadController{})

 

1.2、Controller内容如下

package controllers

import (
    "fmt"
    "strconv"
    "time"

    "github.com/astaxie/beego"
)

type FormUploadController struct {
    beego.Controller
}

// get请求处理方法
func (c *FormUploadController) Get() {
    c.TplName = "form_upload.html"
}

// post请求处理方法
func (c *FormUploadController) Post() {
    // 1.获取上传的文件：c.GetFile()，有三个返回值：文件, 文件头信息, 错误
    file, head, err := c.GetFile("upload_file")
    defer file.Close() // defer关闭文件
    if err != nil {    // 错误处理
        fmt.Println("GetFile failed,", err)
        return
    }
    filename := head.Filename // 获取上传文件的文件名
    fmt.Println(filename)

    // 防止用户多次上传同一个名字的文件造成文件被覆盖，将文件名改为时间戳格式
    // 1.生成时间戳
    time_unix_int := time.Now().Unix()
    time_unix_str := strconv.FormatInt(time_unix_int, 10) // 十进制的方式转换
    fmt.Println(time_unix_str)

    // 2.保存上传的文件：c.SavaToFile()，需要接收两个参数，一个是文件（即form表单里name字段的值，另一个是文件存放的路径+文件名）
    c.SaveToFile("upload_file", "static/upload/"+time_unix_str+"_"+filename)

    c.TplName = "success.html"
}

 

1.3、form_upload.html内容如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Form上传文件页面</h1>

    <!-- 表单上传文件时必需要增加：enctype="multipart/form-data" 选项 -->
    <form action="/form_upload" method="POST" enctype="multipart/form-data">
        <input type="file" name="upload_file"><br>
        <input type="submit" value="提交">
    </form>


</body>
</html>

 

二、ajax上传文件

2.1、路由设置

beego.Router("/ajax_upload", &controllers.AjaxUploadController{})

 

2.2、Controller内容如下

package controllers

import (
    "fmt"
    "strconv"
    "time"

    "github.com/astaxie/beego"
)

type AjaxUploadController struct {
    beego.Controller
}

func (c *AjaxUploadController) Get() {
    c.TplName = "ajax_upload.html"
}

// post请求处理方法
func (c *AjaxUploadController) Post() {
    // 1.获取上传的文件：c.GetFile()，有三个返回值：文件, 文件头信息, 错误
    file, head, err := c.GetFile("upload_file")
    defer file.Close() // defer关闭文件
    if err != nil {    // 错误处理
        fmt.Println("GetFile failed,", err)
        return
    }
    filename := head.Filename // 获取上传文件的文件名
    fmt.Println(filename)

    // 防止用户多次上传同一个名字的文件造成文件被覆盖，将文件名改为时间戳格式
    // 1.生成时间戳
    time_unix_int := time.Now().Unix()
    time_unix_str := strconv.FormatInt(time_unix_int, 10) // 十进制的方式转换
    fmt.Println(time_unix_str)

    // 2.保存上传的文件：c.SavaToFile()，需要接收两个参数，一个是文件（即form表单里name字段的值，另一个是文件存放的路径+文件名）
    c.SaveToFile("upload_file", "static/upload/"+time_unix_str+"_"+filename)

    c.Data["json"] = map[string]string{"code": "200", "message": "处理成功",}
    c.ServeJSON()
}

 

2.3、ajax_upload.html内容如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/static/js/jquery.min.js"></script>
</head>
<body>
    <h1>ajax上传文件页面</h1>

    <form>
        <input type="file" name="upload_file" id="upload_file"><br>
        <input type="button" value="提交" id="btn">
    </form>

    <script>
        var btn = document.getElementById("btn")      // 获取按钮
        btn.onclick = function() {       // 给按钮绑定点击事件函数
            var formdata = new FormData();     // 初始化一个formdata变量，上传文件时要用
            formdata.append("upload_file", $("#upload_file")[0].files[0])       // 前面的"upload_file"是后端获取文件的key，后面的参数是获取文件的(两个列表，都获取第一个)
            $.ajax({        // 发送ajax请求
                url: "/ajax_upload",       // 请求的路径
                type: "POST",          // 请求的方法
                data: formdata,        // 请求的数据
                contentType: false,    // ajax上传文件时这两个参数需要设置成false
                processData: false,
                success: function(data) {      // 处理成功的回掉函数
                    if (data["code"] == "200") {
                        alert(data["message"])
                    }
                    
                },
                error: function(data) {      // 处理失败的回掉函数
                    alert("处理失败")
                }

            })
        }
    </script>

</body>
</html>

 

posted @ 2020-09-07 13:15  欧-阳  阅读(776)  评论(0)    收藏  举报