项目回顾1-图片上传-form表单还是base64-前端图片压缩
第一个项目终于上线了,是一个叫亲青筹的公益众筹平台,微信端,电脑端还有后台界面大部分都是我完成的,几个月过来,感觉收获了很多,觉得要总结一下。
首先想到的是图片上传的问题。在通常表单数据都是ajax上传的情况下,为了上传图片而去使用form表单感觉很蠢。然后那时候也没有想到用jquery form插件。
后台的同事给的方案是用iframe里写一个form表单,然后上传图片之后自动提交表单,他将图片在服务器上的地址以跳转页url的一部分,我再来截取的方式。
方案一:iframe+form表单
<formaction="/user/uploadIdCard.do"class="fileForm picUpload"enctype="multipart/form-data"method="post"><inputtype="file"id="uploadPic"name="file"><labelfor="uploadPic"id="fileBtn">+<imgsrc="" /></label><inputtype="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里的路径 functioniframe(el) {var baseurl = "";varcode, 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上传到后台的方式
<inputtype="file"id="uploadPic"name="file"><labelfor="uploadPic"id="fileBtn">+<imgclass="showPic"src="" /></label><spanclass="tip">请上传图片,大小在2M以内<br/>(图片类型可为jpg,jepg,png,gif,bmp)<br/>推荐图片比例为640*400</span><inputtype="text"name="turnUrl"class="turnUrl"><canvasid="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 = newFileReader();reader.readAsDataURL(file);reader.onload= function(e) {createCanvas(this.result);} });functioncreateCanvas(src) {var canvas = document.getElementById("uploadImg");var cxt = canvas.getContext('2d');canvas.width= 640;canvas.height= 400;var img = newImage();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到后台的过程中
后记:这两个方案都有一个问题,会给后台上传很多冗余图片。不过后台的同事貌似没什么意见,囧。
实际效果是这样的 http://www.qqchou.org/qqcweb/pages/photoIframe.html
转载于:https://www.cnblogs.com/wzls/p/5714273.html
项目回顾1-图片上传-form表单还是base64-前端图片压缩相关推荐
- vueform表单文件上传_峰哥说技术系列-8.Spring Boot文件上传(Form表单和Ajax方式)
今日份主题 Spring Boot文件上传(Form表单和Ajax方式) 在Spring Boot中,和文件上传的主要和MultipartResolver接口有关,他有两个实现类 StandardSe ...
- spring mvc 文件上传 form表单
jsp页面 <form class="form-horizontal" role="form" id="form" enctype=& ...
- Django(文件上传+分页+表单)
一.文件上传 form表单中需要添加 enctype="multipart/form-data" 1.media: 文件上传的文件 在settings.py 文件中配置:MEDIA ...
- kindeditor扩展粘贴截图功能修改图片上传路径并通过webapi上传图片到图片服务器...
2019独角兽企业重金招聘Python工程师标准>>> kindeditor是一个非常好用的富文本编辑器,它的简单使用我就不再介绍了. 而kindeditor却对图片的处理不够理想. ...
- SpringMVC的请求-文件上传-客户端表单实现
文件上传客户端表单需要满足: 表单项type="file" 表单的提交方式是post 表单的enctype属性是多部分表单形式,及enctype="multipart/f ...
- 图片上传并保存到数据库以及显示图片
图片上传并保存到数据库以及显示图片 此处是用保存图片相对路径的方法,上传图片. 1. 首先创建数据库表: create table images ( image_ID int primary key ...
- html结构转图片上传服务器并实现点击复制图片到剪贴板
html结构转图片上传服务器并实现点击复制图片到剪贴板 总结 主要实现了将前端页面上某区域的页面html结构通过html2canvas插件转换成canvas对象,通过canvas对象的toDataUR ...
- Android之解决PC端上传http表单格式文件手机解析文件名乱码问题和PC浏览器下载文件的文件名显示乱码问题
1 问题 问题1. 手机写socket作为服务器,PC浏览器上传http表单格式文件,然后手机端解析携带中文的文件名我解析是乱码. 问题2. 手机写了socket作为服务器,PC浏览器下载文件,但是浏 ...
- php网页中不能上传图片,为什么我的PHP图片上传代码可以实现插入数据库但图片不能插入文件夹中?...
为什么我的PHP图片上传代码可以实现插入数据库但图片不能插入文件夹中? 关注:167 答案:4 mip版 解决时间 2021-01-19 00:58 提问者慢慢学会遗忘 2021-01-18 00 ...
最新文章
- C++Primer:字面值常量类调用函数错误(p268书中示例报错)
- 安卓入门系列-04常见布局之LinearLayout(线性布局)
- php访问url json,PHP操作URL和PHP操作json
- eclipse 离线安装python开发工具 PyDev
- 获取当前系统在线用户的数量
- Python菜鸟入门:day05列表
- 机器学习基础(八)——感知机(iterative optimization)
- html原生的日期选择器,原生JS实现日期选择
- c#winfrom通讯录管理系统
- 情景分析是什么?我们该如何去理解这个概念?
- 远程桌面控制计算机,如何远程控制电脑?远程控制别人计算机(2种实用方法)...
- 今日头条赚钱是真的吗,今日头条赚钱规则是什么
- 怎么提醒自己每晚睡前喝牛奶
- 输入框限制输入表情的方法
- Win11游戏模式怎么开启?Win11开启游戏模式的方法
- Activiti6:解决定时器不执行的问题(定时catching事件的使用)
- 自定义Unity在iOS平台上的虚拟键盘
- [转]实现键值对存储(长文)
- 阿里云安装部署Oracle11g 图文流程
- Android 交流分享汇总
热门文章
- jar包直接拷贝到WEB-INF/lib下和以userLibrary引入的区别
- hping3工具DOS攻击实验
- Python机器学习库sklearn的安装
- 运行caffe自带的mnist实例详细教
- mysql在linux 下安装
- 基于easyui开发Web版Activiti流程定制器详解(六)——Draw2d详解(二)
- Angular Material 攻略 04 Icon
- VMware下配置固定ip,于本机进行通信。
- Machine Learning from Start to Finish with Scikit-Learn
- linux系统分两种更普遍的包,rpm和tar,这两种安装包如何解压与安装