项目实践一图片上传之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 相关文章推荐
得到文本框选中的文字,动态插入文字的js代码
Mar 07 Javascript
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
Mar 05 Javascript
THREE.JS入门教程(4)创建粒子系统
Jan 24 Javascript
jquery默认校验规则整理
Mar 24 Javascript
easyui Draggable组件实现拖动效果
Aug 19 Javascript
微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
Sep 09 Javascript
JQuery统计input和textarea文字输入数量(代码分享)
Dec 29 Javascript
Java设计中的Builder模式的介绍
Mar 22 Javascript
Vue 2.0 中依赖注入 provide/inject组合实战
Jun 20 Javascript
详解微信小程序中var、let、const用法与区别
Jan 11 Javascript
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
Sep 04 Javascript
Vue 实现可视化拖拽页面编辑器
Feb 01 Vue.js
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
Win7 64位系统下PHP连接Oracle数据库
2014/08/20 PHP
php 魔术常量详解及实例代码
2016/12/04 PHP
JQuery中getJSON的使用方法
2010/12/13 Javascript
基于Jquery的简单图片切换效果
2011/01/06 Javascript
用js控制组织结构图可以任意拖拽到指定位置
2014/01/17 Javascript
使用jQuery实现的掷色子游戏动画效果
2014/03/14 Javascript
jquery操作checkbox实现全选和取消全选
2014/05/02 Javascript
JS中处理时间之setUTCMinutes()方法的使用
2015/06/12 Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
2015/09/17 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
2015/12/29 Javascript
javascript学习指南之回调问题
2016/04/23 Javascript
js注入 黑客之路必备!
2016/09/14 Javascript
BootStrap实现手机端轮播图左右滑动事件
2016/10/13 Javascript
使用Node.js给图片加水印的方法
2016/11/15 Javascript
Vue axios 将传递的json数据转为form data的例子
2019/10/29 Javascript
node.js中npm包管理工具用法分析
2020/02/14 Javascript
微信小程序实现加入购物车滑动轨迹
2020/11/18 Javascript
python3中pip3安装出错,找不到SSL的解决方式
2019/12/12 Python
pytorch 数据处理:定义自己的数据集合实例
2019/12/31 Python
利用Tensorboard绘制网络识别准确率和loss曲线实例
2020/02/15 Python
Tensorflow中的图(tf.Graph)和会话(tf.Session)的实现
2020/04/22 Python
python中数字是否为可变类型
2020/07/08 Python
Anaconda+spyder+pycharm的pytorch配置详解(GPU)
2020/10/18 Python
基于python实现坦克大战游戏
2020/10/27 Python
Python爬取你好李焕英豆瓣短评生成词云的示例代码
2021/02/24 Python
html5指南-4.使用Geolocation实现定位功能
2013/01/07 HTML / CSS
西雅图的买手店:Totokaelo
2019/10/19 全球购物
十佳大学生村官事迹
2014/01/09 职场文书
招聘单位介绍信
2014/01/14 职场文书
大学生旷课检讨书
2014/01/22 职场文书
幼儿园大班教学反思
2014/02/10 职场文书
市级优秀班主任事迹材料
2014/05/13 职场文书
教师见习总结范文
2015/06/23 职场文书
幼儿体育课教学反思
2016/02/16 职场文书
2016年基层党组织创先争优承诺书
2016/03/25 职场文书
Maven学习----Maven安装与环境变量配置教程
2021/06/29 Java/Android