项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)


Posted in Javascript onJuly 28, 2016

第一个项目终于上线了,是一个叫亲青筹的公益众筹平台,微信端,电脑端还有后台界面大部分都是我完成的,几个月过来,感觉收获了很多,觉得要总结一下。

首先想到的是图片上传的问题。在通常表单数据都是ajax上传的情况下,为了上传图片而去使用form表单感觉很蠢。然后那时候也没有想到用jquery form插件。

后台的同事给的方案是用iframe里写一个form表单,然后上传图片之后自动提交表单,他将图片在服务器上的地址以跳转页url的一部分,我再来截取的方式。

方案一:iframe+form表单

<form action="/user/uploadIdCard.do" class="fileForm picUpload" enctype="multipart/form-data" method="post">
<input type="file" id="uploadPic" name="file">
<label for="uploadPic" id="fileBtn">
+
<img src="" />
</label>
<input type="text" name="turnUrl" class="turnUrl">
</form> 
$(".turnUrl").val(window.location.pathname);
$("#uploadPic").on('change', function(event) {
event.preventDefault();
$("form").submit();
});

在需要上传图片的界面引入iframe,在调用公用库里的iframe方法,获得图片的url并且把图片显示在iframe中

// 提取iframe里的路径
function iframe(el) {
var baseurl = "";
var code, filePath;
var place = $(el)[0].contentWindow.location.search;
console.log(place);
if (place) {
code = place.match(/code=\d+/)[0].substr(5);
if (place.match(/filepath=\S+/)) {
filePath = place.match(/filepath=\S+/)[0].substr(9);
}
$(el).contents().find(".tip").css('color', '#d0021b');
console.log(filePath);
switch (code) {
case "200":
$(el).contents().find(".tip").text('上传成功');
$(el).contents().find(".tip").css('color', '#55a012');
$(el).contents().find("#fileBtn>img").show().attr("src", baseurl + "/" + filePath);
return "/" + filePath;
case "206":
$(el).contents().find(".tip").text('文件过大');
break;
case "207":
$(el).contents().find(".tip").text('文件类型错误');
break;
case "208":
$(el).contents().find(".tip").text('系统错误');
}
}
}

方案二:后来发现这样的做法有两个问题,一个是用户发的图片太大,后台没有做压缩(后台的同事太忙了,为了迁就他们,就我们前端做压缩了)。

第二个是,上传图片成功之后,图片显示在iframe上,这样需要一定的反应时间,使用者有时候会反映图片传不上去,其实只是后台还没有返回……

于是决定用base64上传到后台的方式

<input type="file" id="uploadPic" name="file">
<label for="uploadPic" id="fileBtn">
+
<img class="showPic" src="" />
</label>
<span class="tip">请上传图片,大小在2M以内<br/>(图片类型可为jpg,jepg,png,gif,bmp)<br/>推荐图片比例为640*400</span>
<input type="text" name="turnUrl" class="turnUrl">
<canvas id="uploadImg" style="display:none"></canvas>

结构和原来差不多,只是多了一个canvas

$("#uploadPic").on('change', function(event) {
event.preventDefault();
console.log($(this)[0].files);
var file = $(this)[0].files[0];
if(file.size>2097152){
alert("上传图片请小于2M");
return false;
} if (!/image\/\w+/.test(file.type)) {
alert("文件必须为图片!");
return false;
}
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e) {
createCanvas(this.result);
}
});
function createCanvas(src) {
var canvas = document.getElementById("uploadImg");
var cxt = canvas.getContext('2d');
canvas.width = 640;
canvas.height = 400;
var img = new Image();
img.src = src;
img.onload = function() {
// var w=img.width;
// var h=img.height;
// canvas.width= w;
// canvas.height=h;
cxt.drawImage(img, 0, 0,640,400);
//cxt.drawImage(img, 0, 0);
$(".showPic").show().attr('src', canvas.toDataURL("image/jpeg", 0.9));
$.ajax({
url: "/front/uploadByBase64.do",
type: "POST",
data: {
"imgStr": canvas.toDataURL("image/jpeg", 0.9).split(',')[1]
},
success: function(data) {
console.log(data);
$(".showPic").show().attr('data-url',"/"+ data.url);
}
});
}
}

1.首先是用的input的file文件的信息,判断文件大小file.size,以及文件是否为图片file.type

2.再通过html5的FileReader接口来获得这个图片的base64数据

3.将这个base64传入canvas中,作为一张图的src,这时候可以设置图片的分辨率大小,保证上传的图都是统一的分辨率。当然也可以按照图片原来的大小。

4.在ajax之前,把处理后的base64直接显示出来(这样用户就可以立刻看到自己上传的图片),再将 canvas.toDataURL("image/jpeg", 0.9).split(',')[1] (类型为image/jpeg,就可以用第二个参数来设置画质了)传到后台对应的接口

5.再将后台返回的url 绑在图片的data-url属性上,在ajax上交整个表单时获取这个data-url就好了,这样用户可以最快时间看到,而url其实还在ajax到后台的过程中

后记:这两个方案都有一个问题,会给后台上传很多冗余图片。不过后台的同事貌似没什么意见,?濉?br />

实际效果是这样的 http://www.qqchou.org/qqcweb/pages/photoIframe.html

以上所述是小编给大家介绍的项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
top.location.href 没有权限 解决方法
Aug 05 Javascript
JQuery Easyui Tree的oncheck事件实现代码
May 28 Javascript
从盛大通行证上摘下来的身份证验证js代码
Jan 11 Javascript
jquery获取下拉列表的值为null的解决方法
Mar 18 Javascript
Jquery实现控件的隐藏和显示实例
Feb 08 Javascript
28个常用JavaScript方法集锦
Jan 14 Javascript
javascript实现的上下无缝滚动效果
Sep 19 Javascript
微信小程序之拖拽排序(代码分享)
Jan 21 Javascript
layui分页效果实现代码
May 19 Javascript
详解无限滚动插件vue-infinite-scroll源码解析
May 12 Javascript
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 jQuery
JavaScript设计模式--桥梁模式引入操作实例分析
May 23 Javascript
AngularJS中的包含详细介绍及实现示例
Jul 28 #Javascript
AngularJS Bootstrap详细介绍及实例代码
Jul 28 #Javascript
JavaScript中windows.open()、windows.close()方法详解
Jul 28 #Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
Jul 28 #Javascript
AngularJS中的API(接口)简单实现
Jul 28 #Javascript
js 声明数组和向数组中添加对象变量的简单实例
Jul 28 #Javascript
AngularJS 输入验证详解及实例代码
Jul 28 #Javascript
You might like
gearman中worker常驻后台,导致MySQL server has gone away的解决方法
2020/02/27 PHP
CL vs ForZe BO5 第五场 2.13
2021/03/10 DOTA
javascript引用对象的方法
2007/01/11 Javascript
学习ExtJS(二) Button常用方法
2009/10/07 Javascript
JavaScript Event学习第五章 高级事件注册模型
2010/02/07 Javascript
JQuery实现的在新窗口打开链接的方法小结
2010/04/22 Javascript
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
2013/03/24 Javascript
JQuery中SetTimeOut传参问题探讨
2013/05/10 Javascript
Javascript通过overflow控制列表闭合与展开的方法
2015/05/15 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
2016/05/27 Javascript
jQuery实现可展开折叠的导航效果示例
2016/09/12 Javascript
微信小程序联网请求的轮播图
2017/07/07 Javascript
浅谈vue的几种绑定变量的值 防止其改变的方法
2018/03/01 Javascript
vue+iview 实现可编辑表格的示例代码
2018/10/31 Javascript
JS数组方法join()用法实例分析
2020/01/18 Javascript
vue学习笔记之Vue中css动画原理简单示例
2020/02/29 Javascript
React组件设计模式之组合组件应用实例分析
2020/04/29 Javascript
[00:30]明星选手化身超级英雄!2018DOTA2亚洲邀请赛全明星赛来临!
2018/04/06 DOTA
Python在信息学竞赛中的运用及Python的基本用法(详解)
2017/08/15 Python
查看Django和flask版本的方法
2018/05/14 Python
python读取指定字节长度的文本方法
2019/08/27 Python
python logging日志模块原理及操作解析
2019/10/12 Python
Python进程的通信Queue、Pipe实例分析
2020/03/30 Python
python数据分析工具之 matplotlib详解
2020/04/09 Python
致长跑运动员加油稿
2014/02/20 职场文书
班主任经验交流材料
2014/12/16 职场文书
优秀党员事迹材料
2014/12/18 职场文书
求职推荐信范文
2015/03/27 职场文书
网聊搭讪开场白
2015/05/28 职场文书
超市主管竞聘书
2015/09/15 职场文书
2017公司年会主持人开幕词
2016/03/04 职场文书
学会用Python实现滑雪小游戏,再也不用去北海道啦
2021/05/20 Python
python获取对象信息的实例详解
2021/07/07 Python
教你快速构建一个基于nginx的web集群项目
2021/11/27 Servers
Go并发4种方法简明讲解
2022/04/06 Golang
mybatis 获取更新记录的id
2022/05/20 Java/Android