项目实践一图片上传之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 相关文章推荐
html下载本地
Jun 19 Javascript
Javascript处理DOM元素事件实现代码
May 23 Javascript
中文路径导致unitpngfix.js不正常的解决方法
Jun 26 Javascript
javascript中怎么做对象的类型判断
Nov 11 Javascript
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
Dec 16 Javascript
利用javascript打开模态对话框(示例代码)
Jan 11 Javascript
javascript生成json数据简单示例分享
Feb 14 Javascript
ECMAScript6中Set/WeakSet详解
Jun 12 Javascript
微信小程序 触控事件详细介绍
Oct 17 Javascript
jQuery实现复制到粘贴板功能
Feb 11 Javascript
如何使node也支持从url加载一个module详解
Jun 05 Javascript
vue 图片裁剪上传组件的实现
Nov 12 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
Netflix将与CLAMP、乙一以及冲方丁等6名知名制作人合伙展开原创动画计划!
2020/03/06 日漫
9个PHP开发常用功能函数小结
2011/07/15 PHP
微信公众平台天气预报功能开发
2014/07/06 PHP
PHP文件上传判断file是否己选择上传文件的方法
2014/11/10 PHP
php通过各种函数判断0和空
2020/07/04 PHP
PHP实现十进制数字与二十六进制字母串相互转换操作示例
2018/08/10 PHP
运用jquery实现table单双行不同显示并能单行选中
2009/07/25 Javascript
几个比较经典常用的jQuery小技巧
2010/03/01 Javascript
Jquery Validation插件防止重复提交表单的解决方法
2010/03/05 Javascript
JavaScript this调用规则说明
2010/03/08 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
2011/11/10 Javascript
Javascript模块化编程(一)AMD规范(规范使用模块)
2013/01/17 Javascript
JavaScript正则表达式之multiline属性的应用
2015/06/16 Javascript
jQuery实现折叠、展开的菜单组效果代码
2015/09/16 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
2017/03/13 Javascript
浅谈React高阶组件
2018/03/28 Javascript
Next.js实现react服务器端渲染的方法示例
2019/01/06 Javascript
微信小程序实现左右列表联动
2020/05/19 Javascript
antd中table展开行默认展示,且不需要前边的加号操作
2020/11/02 Javascript
python占位符输入方式实例
2019/05/27 Python
django框架F&amp;Q 聚合与分组操作示例
2019/12/12 Python
如何使用Python多线程测试并发漏洞
2019/12/18 Python
django rest framework serializers序列化实例
2020/05/13 Python
Django 解决distinct无法去除重复数据的问题
2020/05/20 Python
Python环境管理virtualenv&amp;virtualenvwrapper的配置详解
2020/07/01 Python
python em算法的实现
2020/10/03 Python
CSS3 Media Queries详细介绍和使用实例
2014/05/08 HTML / CSS
世界上最大的隐形眼镜商店:1-800 Contacts
2018/11/03 全球购物
客户表扬信范文
2014/01/10 职场文书
保护动物倡议书
2014/04/15 职场文书
优秀教师演讲稿
2014/05/06 职场文书
绿里奇迹观后感
2015/06/15 职场文书
外科护士长工作总结
2015/08/12 职场文书
HR必备:销售经理聘用合同范本
2019/08/21 职场文书
css 中多种边框的实现小窍门
2021/04/07 HTML / CSS
Java生成读取条形码和二维码的简单示例
2021/07/09 Java/Android