项目实践一图片上传之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 相关文章推荐
用Javascript读取中文COOKIE的解决办法
Feb 15 Javascript
JavaScript 动态改变图片大小
Jun 11 Javascript
javascript 事件处理程序介绍
Jun 27 Javascript
jQuery中:header选择器用法实例
Dec 29 Javascript
jQuery使用post方法提交数据实例
Mar 25 Javascript
javascript多行字符串的简单实现方式
May 04 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
May 26 Javascript
javascript实现uploadify上传格式以及个数限制
Nov 23 Javascript
JavaScript中使用数组方法汇总
Feb 16 Javascript
通过node-mysql搭建Windows+Node.js+MySQL环境的教程
Mar 01 Javascript
vue在使用ECharts时的异步更新和数据加载详解
Nov 22 Javascript
微信小程序用户自定义模版用法实例分析
Nov 28 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
php与paypal整合方法
2010/11/28 PHP
解决file_get_contents无法请求https连接的方法
2013/12/17 PHP
高性能PHP框架Symfony2经典入门教程
2014/07/08 PHP
PHP获取文件夹大小函数用法实例
2015/07/01 PHP
PHP递归统计系统中代码行数
2019/09/19 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
用JavaScript页面不刷新时全选择,全删除(GridView)
2009/04/14 Javascript
JS实现固定在右下角可展开收缩DIV层的方法
2015/02/13 Javascript
AngularJS基础知识笔记之过滤器
2015/05/10 Javascript
jQuery简单实现tab选项卡切换效果
2016/06/20 Javascript
JS实现pasteHTML兼容ie,firefox,chrome的方法
2016/06/22 Javascript
jQuery 3.0十大新特性
2016/07/06 Javascript
Vue.js基础学习之class与样式绑定
2017/03/20 Javascript
JS实现汉字与Unicode码相互转换的方法详解
2017/04/28 Javascript
Javascript中this关键字指向问题的测试与详解
2017/08/11 Javascript
JS手机端touch事件计算滑动距离的方法示例
2017/10/26 Javascript
Vue-Router模式和钩子的用法
2018/02/28 Javascript
JavaScript实现异步图像上传功能
2018/07/12 Javascript
ES6的解构赋值实例详解
2019/05/06 Javascript
详解React的回调渲染模式
2020/09/10 Javascript
JavaScript获取时区实现过程解析
2020/09/24 Javascript
Python3中bytes类型转换为str类型
2018/09/27 Python
对python使用telnet实现弱密码登录的方法详解
2019/01/26 Python
Python爬虫实现验证码登录代码实例
2019/05/10 Python
django中的图片验证码功能
2019/09/18 Python
Hotels.com中国区:好订网
2016/08/18 全球购物
英国折扣高尔夫商店:Discount Golf Store
2019/11/19 全球购物
体育教育个人自荐信范文
2013/12/01 职场文书
应届毕业生应聘自荐信范文
2014/02/26 职场文书
产品开发计划书
2014/04/27 职场文书
国旗下演讲稿
2014/05/08 职场文书
奥巴马就职演讲稿
2014/05/15 职场文书
师德师风学习材料
2014/12/19 职场文书
养成教育工作总结
2015/08/13 职场文书
redis调用二维码时的不断刷新排查分析
2022/04/01 Redis
Win11软件图标固定到任务栏
2022/04/19 数码科技