抱歉这个原页面打不开，链接是百度快照的，请作者见谅
我对前端了解的不多，这里原作者提供的思路和插件挺好的,以下全部为转载:
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了。
有疑问加站长微信联系（非本文作者）
