当前位置:Gxlcms > JavaScript > 项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)

项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)

时间:2021-07-01 10:21:17 帮助过:47人阅读

第一个项目终于上线了,是一个叫亲青筹的公益众筹平台,微信端,电脑端还有后台界面大部分都是我完成的,几个月过来,感觉收获了很多,觉得要总结一下。

首先想到的是图片上传的问题。在通常表单数据都是ajax上传的情况下,为了上传图片而去使用form表单感觉很蠢。然后那时候也没有想到用jquery form插件。

后台的同事给的方案是用iframe里写一个form表单,然后上传图片之后自动提交表单,他将图片在服务器上的地址以跳转页url的一部分,我再来截取的方式。

方案一:iframe+form表单

  1. <form action="/user/uploadIdCard.do" class="fileForm picUpload" enctype="multipart/form-data" method="post">
  2. <input type="file" id="uploadPic" name="file">
  3. <label for="uploadPic" id="fileBtn">
  4. +
  5. <img src="" />
  6. </label>
  7. <input type="text" name="turnUrl" class="turnUrl">
  8. </form>
  9. $(".turnUrl").val(window.location.pathname);
  10. $("#uploadPic").on('change', function(event) {
  11. event.preventDefault();
  12. $("form").submit();
  13. });

在需要上传图片的界面引入iframe,在调用公用库里的iframe方法,获得图片的url并且把图片显示在iframe中

  1. // 提取iframe里的路径
  2. function iframe(el) {
  3. var baseurl = "";
  4. var code, filePath;
  5. var place = $(el)[0].contentWindow.location.search;
  6. console.log(place);
  7. if (place) {
  8. code = place.match(/code=\d+/)[0].substr(5);
  9. if (place.match(/filepath=\S+/)) {
  10. filePath = place.match(/filepath=\S+/)[0].substr(9);
  11. }
  12. $(el).contents().find(".tip").css('color', '#d0021b');
  13. console.log(filePath);
  14. switch (code) {
  15. case "200":
  16. $(el).contents().find(".tip").text('上传成功');
  17. $(el).contents().find(".tip").css('color', '#55a012');
  18. $(el).contents().find("#fileBtn>img").show().attr("src", baseurl + "/" + filePath);
  19. return "/" + filePath;
  20. case "206":
  21. $(el).contents().find(".tip").text('文件过大');
  22. break;
  23. case "207":
  24. $(el).contents().find(".tip").text('文件类型错误');
  25. break;
  26. case "208":
  27. $(el).contents().find(".tip").text('系统错误');
  28. }
  29. }
  30. }

方案二:后来发现这样的做法有两个问题,一个是用户发的图片太大,后台没有做压缩(后台的同事太忙了,为了迁就他们,就我们前端做压缩了)。

第二个是,上传图片成功之后,图片显示在iframe上,这样需要一定的反应时间,使用者有时候会反映图片传不上去,其实只是后台还没有返回……

于是决定用base64上传到后台的方式

  1. <input type="file" id="uploadPic" name="file">
  2. <label for="uploadPic" id="fileBtn">
  3. +
  4. <img class="showPic" src="" />
  5. </label>
  6. <span class="tip">请上传图片,大小在2M以内<br/>(图片类型可为jpg,jepg,png,gif,bmp)<br/>推荐图片比例为640*400</span>
  7. <input type="text" name="turnUrl" class="turnUrl">
  8. <canvas id="uploadImg" style="display:none"></canvas>

结构和原来差不多,只是多了一个canvas

  1. $("#uploadPic").on('change', function(event) {
  2. event.preventDefault();
  3. console.log($(this)[0].files);
  4. var file = $(this)[0].files[0];
  5. if(file.size>2097152){
  6. alert("上传图片请小于2M");
  7. return false;
  8. } if (!/image\/\w+/.test(file.type)) {
  9. alert("文件必须为图片!");
  10. return false;
  11. }
  12. var reader = new FileReader();
  13. reader.readAsDataURL(file);
  14. reader.onload = function(e) {
  15. createCanvas(this.result);
  16. }
  17. });
  18. function createCanvas(src) {
  19. var canvas = document.getElementById("uploadImg");
  20. var cxt = canvas.getContext('2d');
  21. canvas.width = 640;
  22. canvas.height = 400;
  23. var img = new Image();
  24. img.src = src;
  25. img.onload = function() {
  26. // var w=img.width;
  27. // var h=img.height;
  28. // canvas.width= w;
  29. // canvas.height=h;
  30. cxt.drawImage(img, 0, 0,640,400);
  31. //cxt.drawImage(img, 0, 0);
  32. $(".showPic").show().attr('src', canvas.toDataURL("image/jpeg", 0.9));
  33. $.ajax({
  34. url: "/front/uploadByBase64.do",
  35. type: "POST",
  36. data: {
  37. "imgStr": canvas.toDataURL("image/jpeg", 0.9).split(',')[1]
  38. },
  39. success: function(data) {
  40. console.log(data);
  41. $(".showPic").show().attr('data-url',"/"+ data.url);
  42. }
  43. });
  44. }
  45. }

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

以上所述是小编给大家介绍的项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

人气教程排行