Beego+uploadify實現圖片批量上傳

這是一個建立於 的文章，其中的資訊可能已經有所發展或是發生改變。

抱歉這個原頁面打不開，連結是百度快照的，請作者見諒

我對前端瞭解的不多，這裡原作者提供的思路和外掛程式挺好的,以下全部為轉載:

Beego+uploadify實現圖片批量上傳

Golang>Beego+uploadify實現圖片批量上傳

by momaek 2014-09-12 02:38.

使用uploadify來實現無重新整理批量上傳圖片，後台使用Beego 來處理上傳的圖片。需要在 form 表單需要添加這個屬性

enctype="multipart/form-data"

不然瀏覽器是不會上傳你的檔案的。

下載uploadify，就不多說了。免費的版本就可以了，你也可以下載收費的。免費的是flash版本，收費的是html5版本。具體區別我沒有研究過。感興趣的童鞋可以去研究下。

引入uploadify：

<script src="/static/js/jquery-1.6.js" type="text/javascript" charset="utf-8"></script> //uploadify是基於jQuery的所以需要jQuery<script src="/static/js/uploadify/jquery.uploadify.min.js" type="text/javascript"></script><link rel="stylesheet" href="/static/js/uploadify/uploadify.css" type="text/css">

然後就是HTML代碼：

<form method="POST" action="/addphoto" enctype="multipart/form-data">    <input type="file" name="image" id="file_upload"></form>

將uploadify綁定在input元素上面：

<script type="text/javascript">$(function(){  $("#file_upload").uploadify({//繫結元素    'fileObjName':'image',//html input標籤的name屬性的值吧。        'debug':false,        'auto':true,//自動上傳    'buttonText':'Choose A File',    'removeCompleted':false, //上傳完成以後是否儲存進度條    'cancelImg':'/static/js/uploadify/uploadify-cancel.png',   'swf':'/static/js/uploadify/uploadify.swf',//必須設定  swf檔案路徑    'uploader':'/addphoto',//必須設定，上傳檔案觸發的url    'fileTypeDesc':'FileType',    'fileTypeExts':'*.jpg;*.jpge;*.gif;*.png',    'overrideEvents':['onDialogClose'],    'multi':true,    'formData':{'url':window.location.search}//這裡我需要得到當前頁面url的問號後面的值，所以就用 fromData 這個參數。  })})</script>

最後是beego的處理，如同處理單個檔案上傳：

func (this *AddPhoto) AP() {    f, h, _ := this.GetFile("image")//擷取上傳的檔案    path := this.Input().Get("url")//存檔案的路徑    path = path[7:]    path = "./static/img/" + path + "/" + h.Filename    f.Close()// 關閉上傳的檔案，不然的話會出現臨時檔案不能清除的情況    this.SaveToFile("image", path)//存檔案    WaterMark(path)//給檔案加浮水印    this.Redirect("/addphoto", 302)

這樣基本就完成了，就是這麼簡單。

如果你是使用ngignx來部署的web應用，那麼你可能需要調整下設定檔，以確保上傳的檔案大於1M時能行的通。

sudo vi /etc/nginx.nginx.conf //開啟nginx設定檔client_max_body_size 10m //加入這句，上傳檔案最大就是10m了

這樣就OK了。