方案计划网站,海口最新通知今天重要消息,怎么样建设一个电影网站视频下载,永久免费企业网站建设第一个项目终于上线了#xff0c;是一个叫亲青筹的公益众筹平台#xff0c;微信端#xff0c;电脑端还有后台界面大部分都是我完成的#xff0c;几个月过来#xff0c;感觉收获了很多#xff0c;觉得要总结一下。 首先想到的是图片上传的问题。在通常表单数据都是ajax上传…第一个项目终于上线了是一个叫亲青筹的公益众筹平台微信端电脑端还有后台界面大部分都是我完成的几个月过来感觉收获了很多觉得要总结一下。 首先想到的是图片上传的问题。在通常表单数据都是ajax上传的情况下为了上传图片而去使用form表单感觉很蠢。然后那时候也没有想到用jquery form插件。 后台的同事给的方案是用iframe里写一个form表单然后上传图片之后自动提交表单他将图片在服务器上的地址以跳转页url的一部分我再来截取的方式。 方案一iframeform表单 form action/user/uploadIdCard.do classfileForm picUpload enctypemultipart/form-data methodpostinput typefile iduploadPic namefilelabel foruploadPic idfileBtnimg src //labelinput typetext nameturnUrl classturnUrl/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(#fileBtnimg).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 typefile iduploadPic namefilelabel foruploadPic idfileBtnimg classshowPic src //labelspan classtip请上传图片大小在2M以内br/(图片类型可为jpg,jepg,png,gif,bmp)br/推荐图片比例为640*400/spaninput typetext nameturnUrl classturnUrlcanvas iduploadImg styledisplay:none/canvas 结构和原来差不多只是多了一个canvas $(#uploadPic).on(change, function(event) {event.preventDefault();console.log($(this)[0].files);var file $(this)[0].files[0];if(file.size2097152){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 wimg.width;// var himg.height;// canvas.width w;// canvas.heighth;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
