Beego 學習筆記11:文件的上傳下載


文件的上傳和下載

1->文件的上傳

文件的上傳,采用的是uploadify.js這個插件.

本事例實現的是上傳圖片文件,其他的文件上傳也一樣。

2->文件的下載

文件的下載有兩個實現的方式:

1->url路徑指向文件的路徑,瀏覽器自行下載。但此方法存在缺陷:圖片文件,text,pdf等文件會在瀏覽器中自動顯示,不會執行下載功能

2->使用beego帶有的下載方法,執行下載功能

3>新建一個fileopt.go控制器,具體代碼如下:

  

package controllers

import (
	"fmt"
	"strings"
	"path"
	"github.com/astaxie/beego"
)

type FileOptUploadController struct {
	beego.Controller
}

//上傳下載文件的頁面
func (c *FileOptUploadController) Get() {
	c.TplName = "fileopt.html"
}

//上傳文件
func (this *FileOptUploadController) Post() { 
    //image,這是一個key值,對應的是html中input type-‘file’的name屬性值
	f, h, _ := this.GetFile("image") 
	//得到文件的名稱 
	fileName := h.Filename	
	arr := strings.Split(fileName, ":")	
	if len(arr) > 1 {	
	  index := len(arr) - 1	
	  fileName = arr[index]	
	}
	fmt.Println("文件名稱:")
	fmt.Println(fileName)
	//關閉上傳的文件,不然的話會出現臨時文件不能清除的情況
	f.Close()   
	//保存文件到指定的位置
	//static/uploadfile,這個是文件的地址,第一個static前面不要有/
	this.SaveToFile("image", path.Join("static/uploadfile",fileName)) 
	//顯示在本頁面,不做跳轉操作  
	this.TplName = "fileopt.html"  
}

//下載文件
type FileOptDownloadController struct {
	beego.Controller
}
func (this *FileOptDownloadController) Get() { 
	//圖片,text,pdf文件全部在瀏覽器中顯示了,並沒有完全的實現下載的功能 
	//this.Redirect("/static/img/1.jpg", 302)
	
	//第一個參數是文件的地址,第二個參數是下載顯示的文件的名稱
	this.Ctx.Output.Download("static/img/1.jpg","tu1.jpg")
}

  

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/FileOpt',         //必須設置,上傳文件觸發的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(){
          window.location.href="/Home/FileDown";
        }
</script>
    </body>
</html>

  

5>在路由中添加路由

package routers

 

import (

         "secondweb/controllers"

         "github.com/astaxie/beego"

)

 

func init() {

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

         beego.Router("/Home/PageData", &controllers.UserController{})

         beego.Router("/Home/PageNextData", &controllers.YonghuController{})

         beego.Router("/Home/Index", &controllers.PageController{})

         beego.Router("/Home/EasyUI", &controllers.EasyUIController{})

         beego.Router("/Home/EasyUIData", &controllers.EasyUIDataController{})

         beego.Router("/Home/FileOpt", &controllers.FileOptUploadController{})

         beego.Router("/Home/FileDown", &controllers.FileOptDownloadController{})

}

  

6>項目的結構如下:

 

 

7>執行的效果如下:

1->文件操作的頁面如下,路由如下:

 

 

 

 

2->點擊選擇文件按鈕,選擇需要上傳的圖片,點擊打開按鈕,效果如下:

 

3->點擊下載圖片按鈕,瀏覽器下載一張指定的圖片

 

 

8>下一章,將文件內容的讀取。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM