Gin go learning note 4: upload and download of gin web framework file

File upload and download

1 - > file upload

File upload, the use of uploadify.js plug-in

In this case, the image file is uploaded, so are other files.

2 - > download of files

There are two ways to download files:

1 - > URL path points to the path of the file, which is downloaded by the browser. However, this method has some defects: image files, text, pdf and other files will be automatically displayed in the browser, and the download function will not be performed

2 - > use the download method not included in gin

3> Create a new fileopt.go controller. The specific code is as follows:

  

package controllers

import (
	"io"
	"log"
	"os"
	"fmt"
	"github.com/gin-gonic/gin"
	"net/http"
)
/**File upload and download operation page**/
func Fileopthtml(c *gin.Context){
	c.HTML(http.StatusOK, "fileopt.html", gin.H{
		"title": "GIN: File upload and download operation layout page",
	})
}

/**Upload method**/
func Fileupload(c *gin.Context){
	//Get uploaded files
	file, header, err := c.Request.FormFile("image") //Image this is' fileobjname 'in the upload verify parameter definition:' image '
	if err != nil {
		c.String(http.StatusBadRequest, "Bad request")
		return
	}
	//Name of the file
	filename := header.Filename

	fmt.Println(file, err, filename)
    //create a file 
	out, err := os.Create("static/uploadfile/"+filename)
	//Note that the static/uploadfile / here is not / static/uploadfile/
	if err != nil {
		log.Fatal(err)
	}
	defer out.Close()
	_, err = io.Copy(out, file)
	if err != nil {
		log.Fatal(err)
	}
	c.String(http.StatusCreated, "upload successful")
}

/**Download method**/
func Filedown(c *gin.Context){
	//No method available
}

  

4> Create a new HTML page named fileopt.html. The code is as follows:

 

<!DOCTYPE html>
 
<html>
      <head>
        <title>home page - User list page</title>
        <link rel="shortcut icon" href="/static/img/favicon.png" /> 
        <link rel="stylesheet" href="/static/uploadify/uploadify.css" rel="stylesheet"/>
        <script type="text/javascript" src="/static/js/jquery-2.1.1.min.js"></script> 
        <script src="/static/uploadify/jquery.uploadify.min.js"></script>
      </head>       
    <body>
        <!--Upload part-->
        <form method="POST" action="/Home/UploadFile" enctype="multipart/form-data">   
            <input type="file" name="image" id="file_upload">
            <div id="imgdiv" style="display:none;">

            </div>
            
        </form>
        <!--Download pictures-->
        <button value="Download pictures" onclick="download()">Download pictures</button>
        <!--JS Part-->
       <script type="text/javascript">
         
        //Page initialization
        $(function () {
            $("#File [upload "). Uploadify ({/ / binding element      
            'fileObjName':'image',//The value of the name attribute of the html input tag.                 
            'debug':false,                  
            'auto':true,    //Auto upload 
            'multi':true,
            'removeCompleted':false, //Save progress bar after upload            
            'buttonText':'Select file',                                     
            'cancelImg':'/static/uploadify/uploadify-cancel.png',                   
            'swf':'/static/uploadify/uploadify.swf', //swf file path must be set             
            'uploader':'/home/fileuplaod',         //The url triggered by uploading file must be set       
            'fileTypeDesc':'FileType',                  
            'fileTypeExts':'*.jpg;*.jpge;*.gif;*.png;',          
            'multi':true,  
            'onUploadSuccess': function (file, data, response) {
               $("#imgdiv").show();
               var html='<image src="/static/uploadfile/'+file.name+'" style="height:150px;width:150px;margin:20px;"/>';
               $("#imgdiv").append(html);
            }             
          });         
           
        });
        //Download pictures
        function download(){
          //There is no background method available
          //gin does not implement the download method at present
          //Only use url
          window.location.href="/static/img/1.jpg";
        }
  </script>
 </body>
</html>

  

5> Add route to route

package routers

import (
  "github.com/gin-gonic/gin"
  . "GinLearn/GinLearn/apis" //api part
  . "GinLearn/GinLearn/controllers" //Constroler part
 )
 
func InitRouter() *gin.Engine{
  router := gin.Default()
  //Hello World
  router.GET("/", IndexApi)
  //Rendering html pages
  router.LoadHTMLGlob("views/*")
  router.GET("/home/index", ShowHtmlPage)
  //List page
  router.GET("/home/list", ListHtml)
  router.POST("/home/PageData", GetDataList)
  router.POST("/home/PageNextData", PageNextData)

  //New page
  router.GET("/home/add", AddHtml)
  router.POST("/home/saveadd", AddPersonApi)
  
   //Edit page
   router.GET("/home/edit", EditHtml)
   router.POST("/home/saveedit", EditPersonApi)

    //delete
    router.POST("/home/delete", DeletePersonApi)

    //Bootstrap layout page
    router.GET("/home/bootstrap", Bootstraphtml)

    //File upload and download 
    router.GET("/home/fileopt", Fileopthtml)
    router.POST("/home/fileuplaod", Fileupload)
    router.GET("/home/filedown", Filedown)
    
    return router
 }
 

  

6> The structure of the project is as follows:

 

 

7> The effect of implementation is as follows:

1 - > the page of file operation is as follows, and the route is as follows:

 

 

2 - > click the select File button, select the image to be uploaded, and click the open button. The effect is as follows:

 

 

3 - > click the download picture button, and the browser downloads a specified picture

 

 

8> In the next chapter, read the contents of the file.

Tags: Go github Javascript JQuery Attribute

Posted on Tue, 05 May 2020 03:02:15 -0400 by bbxrider