golang实现图片上传

该代码为使用beego实现前后端图片上传。话不多说,直接上代码。

1.前端代码

html代码:

 <div class="col-5 f-l text text-r">背景图(必须):</div>
<div class="img-box">
<label>
<span class="copy-btn Hui-iconfont"></span>
<input type="file" class="up-file">
</label>
</div>
<div class="img-file col-offset-5">
</div>

JS代码:

a.读取图片代码,用于在页面上显示。

//读取图片
function loadImg(){
//获取文件
var file = $(".up-file")[0].files[0];
//创建读取文件的对象
var reader = new FileReader();
//创建文件读取相关的变量
var imgFile;
//为文件读取成功设置事件
reader.onload=function(e) {
var e=window.event||e;
imgFile = e.target.result;
console.log(imgFile);
$(".img-file").css({'background':"url("+imgFile+")"});
isimg();
}; //正式读取文件
reader.readAsDataURL(file); }

  b.验证是否有图片存在

//是否有图片验证
function isimg(){
var img= $(".img-file").css('background-image'); if(img.indexOf("data:image")==-1&&img.indexOf(".jpg")==-1){
$(".mess").html("请添加背景图片").css("opacity",1);
return false;
}
else{
$(".mess").css("opacity",0).html("");
return true;
}
}

  c.提交上传,将图片以base64编码的方式传给后端

function addData(){
var url=$(".img-file").css("background-image");
var data1=[{"name":"url","value":url}];
$.ajax({
url:"/commmethod/method/uploadimg",
data:data1,
type:"post",
ContentType:"application/json",
success:function(resp){
......
}
});
}

  

2.后端代码

func (this *CommMethodController) UploadImg() {
fileurl := this.GetString("url")
DataArr := strings.Split(fileurl, ",")
//去除包装,获取到base64编码
imgBase64 := DataArr[1][:len(DataArr[1])-2]
//base64转码
imgs, err := base64.StdEncoding.DecodeString(imgBase64)
if err != nil {
beego.Error("base64 decode error:", err)
}
timenow := time.Now().Unix()
file, err := os.OpenFile("./static/img/"+strconv.FormatInt(timenow, 10)+".jpg", os.O_CREATE|os.O_WRONLY, 0644)
if err != nil {
beego.Debug("create file error:", err)
}
w := bufio.NewWriter(file) //创建新的 Writer 对象
_, err3 := w.WriteString(string(imgs))
if err3 != nil {
beego.Error("write error:", err3)
}
w.Flush()
defer file.Close()
imgname := strconv.FormatInt(timenow, 10) + ".jpg"
t := struct {
ImageName string `json:"imagename"`
}{imgname}
this.Data["json"] = t
this.ServeJSON()
} /**
*此代码主要用于编辑图片时,删除原有图片
* 判断文件是否存在 存在返回 true 不存在返回false
*/
func checkFileIsExist(filename string) bool {
var exist = true
if _, err := os.Stat(filename); os.IsNotExist(err) {
exist = false
}
return exist
}

  

golang实现图片上传的更多相关文章

  1. golang学习之beego框架配合easyui实现增删改查及图片上传

    golang学习之beego框架配合easyui实现增删改查及图片上传 demo目录: upload文件夹主要放置上传的头像文件,main是主文件,所有效果如下: 主页面: 具体代码: <!DO ...

  2. Asp.Net Mvc 使用WebUploader 多图片上传

    来博客园有一个月了,哈哈.在这里学到了很多东西.今天也来试着分享一下学到的东西.希望能和大家做朋友共同进步. 最近由于项目需要上传多张图片,对于我这只菜鸟来说,以前上传图片都是直接拖得控件啊,而且还是 ...

  3. 06.LoT.UI 前后台通用框架分解系列之——浮夸的图片上传

    LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...

  4. JS图片上传预览插件制作(兼容到IE6)

    其实,图片预览功能非常地常见.很意外,之前遇到上传图片的时候都不需要预览,也一直没有去实现过.现在手上的项目又需要有图片预览功能,所以就动手做了一个小插件.在此分享一下思路. 一.实现图片预览的一些方 ...

  5. HTML5笔记:跨域通讯、多线程、本地存储和多图片上传技术

    最近做项目在前端我使用了很多新技术,这些技术有bootstrap.angularjs,不过最让我兴奋的还是使用了HTML5的技术,今天我想总结一些HTML5的技术,好记性不如烂笔头,写写文章可以很好的 ...

  6. 对百度的UEditor多图片上传的一些补充

    我已经写了一篇文章关于百度的UEditor提取多图片上传模块.如果还没有看过,请点击以下链接查看 http://www.cnblogs.com/luke1006/p/3719029.html 出差了两 ...

  7. 使用localResizeIMG3+WebAPI实现手机端图片上传

    前言 惯例~惯例~昨天发表的使用OWIN作为WebAPI的宿主..嗯..有很多人问..是不是缺少了什么 - - 好吧,如果你要把OWIN寄宿在其他的地方...代码如下: namespace Conso ...

  8. TinyMCE的使用(包括汉化及本地图片上传功能)

    TinyMCE我就不多介绍了,这是下载地址:https://www.tinymce.com/download/ 下载下来是英文版,要汉化也很简单.首先去网上随便下载个汉化包,然后把汉化包解压后的lan ...

  9. 包含修改字体,图片上传等功能的文本输入框-Bootstrap

    通过jQuery Bootstrap小插件,框任何一个div转换变成一个富文本编辑框,主要特色: 在Mac和window平台下自动针对常用操作绑定热键 可以拖拽插入图片,支持图片上传(也可以获取移动设 ...

随机推荐

  1. Codeforces Round #397 by Kaspersky Lab and Barcelona Bootcamp (Div. 1 + Div. 2 combined) A - Neverending competitions

    地址:http://codeforces.com/contest/765/problem/A 题目: A. Neverending competitions time limit per test 2 ...

  2. python入门三:文件操作

    一.文件操作 1.文件对象:和c一样,要想对一个文件进行操作,需要获取该文件的对象 f = open("xxx") # 打开文件并获取文件对象 f.xxx # 对文件进行某些操作 ...

  3. c#中的控件01

    1.常用控件: 只读文本:TextBlock.文本框:TextBox.按钮:Button 事件:鼠标移到按钮上的时候显示“大爷您来了”,离开 显示“大爷常来”,Click(点击).Loaded(控件加 ...

  4. 如何修改Django中的日期和时间格式 DateTimeField

    html页面从数据库中读出DateTimeField字段时,显示的时间格式和数据库中存放的格式不一致,比如数据库字段内容为2017-06-03 13:00:00,但是页面显示的却是Apr. 03, 2 ...

  5. tesseract 3.05 release 编译

    tesseract 3.05 release版本的对应配置好的vs2015工程.偷懒必备,毕竟依赖那么多库,环境配置还是要费点事的.https://github.com/peirick/VS2015_ ...

  6. 使用redis做mysql缓存

    应用Redis实现数据的读写,同时利用队列处理器定时将数据写入mysql. 同时要注意避免冲突,在redis启动时去mysql读取所有表键值存入redis中,往redis写数据时,对redis主键自增 ...

  7. MATLAB安装libsvm工具箱的方法

    支持向量机(support vector machine,SVM)是机器学习中一种流行的学习算法,在分类与回归分析中发挥着重要作用.基于SVM算法开发的工具箱有很多种,下面我们要安装的是十分受欢迎的l ...

  8. 配置zabbix_server通过zabbix_proxy进行监控Host

    zabbix_server添加proxy并监控主机 zabbix分布式监控系统安装配置:http://www.cnblogs.com/LuckWJL/p/9037007.html 安装配置zabbix ...

  9. 1001: [BeiJing2006]狼抓兔子

    1001: [BeiJing2006]狼抓兔子 Time Limit: 15 Sec  Memory Limit: 162 MBSubmit: 12827  Solved: 3044[Submit][ ...

  10. python标准库学习-SimpleHTTPServer

    这是一个专题 记录学习python标准库的笔记及心得 简单http服务 SimpleHTTPServer 使用 python -m SimpleHTTPServer 默认启动8000端口 源码: &q ...