Beego+uploadify实现图片批量上传

u012210379 · · 5217 次点击 · · 开始浏览    
这是一个创建于 的文章,其中的信息可能已经有所发展或是发生改变。

抱歉这个原页面打不开,链接是百度快照的,请作者见谅

我对前端了解的不多,这里原作者提供的思路和插件挺好的,以下全部为转载:

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了。

本文来自:CSDN博客

感谢作者:u012210379

查看原文:Beego+uploadify实现图片批量上传

入群交流(和以上内容无关):Go中文网 QQ 交流群:729884609 或加微信入微信群:274768166 备注:入群;关注公众号:Go语言中文网

5217 次点击  
加入收藏 微博
暂无回复
添加一条新回复 (您需要 登录 后才能回复 没有账号 ?)
  • 请尽量让自己的回复能够对别人有帮助
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`
  • 支持 @ 本站用户;支持表情(输入 : 提示),见 Emoji cheat sheet
  • 图片支持拖拽、截图粘贴等方式上传