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.