g-var.com | G-VAR's Blog

Recent Posts

Full Tag Index

Posts in “Beego”

(转)Beego+uploadify实现图片批量上传

Sun, Jan 18, 2015
原文地址:http://www.momaek.me/article?tid=12 使用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.