文件的上傳和下載
1->文件的上傳
文件的上傳，采用的是uploadify.js這個插件.
本事例實現的是上傳圖片文件，其他的文件上傳也一樣。
2->文件的下載
文件的下載有兩個實現的方式：
1->url路徑指向文件的路徑，瀏覽器自行下載。但此方法存在缺陷：圖片文件，text，pdf等文件會在瀏覽器中自動顯示，不會執行下載功能
2->使用gin 暫時沒帶有的下載方法
3>新建一個fileopt.go控制器,具體代碼如下:
package controllers
import (
"io"
"log"
"os"
"fmt"
"github.com/gin-gonic/gin"
"net/http"
)
/**文件上傳下載操作頁面**/
func Fileopthtml(c *gin.Context){
c.HTML(http.StatusOK, "fileopt.html", gin.H{
"title": "GIN: 文件上傳下載操作布局頁面",
})
}
/**上傳方法**/
func Fileupload(c *gin.Context){
//得到上傳的文件
file, header, err := c.Request.FormFile("image") //image這個是uplaodify參數定義中的 'fileObjName':'image'
if err != nil {
c.String(http.StatusBadRequest, "Bad request")
return
}
//文件的名稱
filename := header.Filename
fmt.Println(file, err, filename)
//創建文件
out, err := os.Create("static/uploadfile/"+filename)
//注意此處的 static/uploadfile/ 不是/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")
}
/**下載方法**/
func Filedown(c *gin.Context){
//暫時沒有提供方法
}
4>新建一個html頁面,名為fileopt.html,其代碼如下:
<!DOCTYPE html>
<html>
<head>
<title>首頁 - 用戶列表頁面</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>
<!--上傳部分-->
<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>
<!--下載圖片-->
<button value="下載圖片" onclick="download()">下載圖片</button>
<!--JS部分-->
<script type="text/javascript">
//頁面的初始化
$(function () {
$("#file_upload").uploadify({ //綁定元素
'fileObjName':'image',//html input標簽的name屬性的值吧。
'debug':false,
'auto':true, //自動上傳
'multi':true,
'removeCompleted':false, //上傳完成以后是否保存進度條
'buttonText':'選擇文件',
'cancelImg':'/static/uploadify/uploadify-cancel.png',
'swf':'/static/uploadify/uploadify.swf', //必須設置 swf文件路徑
'uploader':'/home/fileuplaod', //必須設置，上傳文件觸發的url
'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);
}
});
});
//下載圖片
function download(){
//暫時沒有提供后台的方法
//gin暫時沒有實現下載方法
//只有使用url
window.location.href="/static/img/1.jpg";
}
</script>
</body>
</html>
5>在路由中添加路由
package routers
import (
"github.com/gin-gonic/gin"
. "GinLearn/GinLearn/apis" //api部分
. "GinLearn/GinLearn/controllers" //constroller部分
)
func InitRouter() *gin.Engine{
router := gin.Default()
//Hello World
router.GET("/", IndexApi)
//渲染html頁面
router.LoadHTMLGlob("views/*")
router.GET("/home/index", ShowHtmlPage)
//列表頁面
router.GET("/home/list", ListHtml)
router.POST("/home/PageData", GetDataList)
router.POST("/home/PageNextData", PageNextData)
//新增頁面
router.GET("/home/add", AddHtml)
router.POST("/home/saveadd", AddPersonApi)
//編輯頁面
router.GET("/home/edit", EditHtml)
router.POST("/home/saveedit", EditPersonApi)
//刪除
router.POST("/home/delete", DeletePersonApi)
//Bootstrap布局頁面
router.GET("/home/bootstrap", Bootstraphtml)
//文件的上傳和下載
router.GET("/home/fileopt", Fileopthtml)
router.POST("/home/fileuplaod", Fileupload)
router.GET("/home/filedown", Filedown)
return router
}
6>項目的結構如下:
7>執行的效果如下:
1->文件操作的頁面如下，路由如下:
2->點擊選擇文件按鈕，選擇需要上傳的圖片，點擊打開按鈕，效果如下:
3->點擊下載圖片按鈕，瀏覽器下載一張指定的圖片
8>下一章，將文件內容的讀取。