返回
编程
分类

不过是单张上传的,而每次都上传原始大小的图片(后台处理压缩)十分影响用户体验

日期: 2019-11-19 06:34 浏览次数 : 141

Html5上传图片 移动端、PC端通用代码,

废话不多说了,说一下今天给大家分享的是 html5上传图片。我们是在移动端使用的,但是这个在pc上也通用兼容性我只在谷歌测试过。之前一直用的angular写的《用HTML5的File API做上传图片预览能》。今天摒弃angular的东西分享一个html5 + js 图片上传案例。那么今天还是按照一定的步骤来讲吧。

必威官网亚洲体育 1

 HTML 第一步创建html,我们在页面中放置一个文件选择的input#upload(PS:偷懒一下,这里就不再次写案例了直接复制的我们的页面)

CSS Code复制内容到剪贴板

  1. <div class="con4">     
  2.  <span class="btn upload">上传<input type="file" class="upload_pic" id="upload" /></span>     
  3. </div>     

CSS注:css 写的有些乱哈,看不懂的可以问我,或者直接自己写一下就ok。

CSS Code复制内容到剪贴板

  1. con{      
  2.      width: %;      
  3.      height: auto;      
  4.      overflow: hidden;      
  5.      margin: % auto  auto;      
  6.      color: #FFFFFF;      
  7. }      
  8. 必威官网亚洲体育 ,con .btn{      
  9.      width: %;      
  10.      height: px;      
  11.      line-height: px;      
  12.      text-align: center;      
  13.      background: #dbc;      
  14.      display: block;      
  15.      font-size: px;      
  16.      border-radius: px;      
  17. }      
  18. upload{      
  19.      float: left;      
  20.      position: relative;      
  21. }      
  22. upload_pic{      
  23.      display: block;      
  24.      width: %;      
  25.      height: px;      
  26.      position: absolute;      
  27.      left: ;      
  28.      top: ;      
  29.      opacity: ;      
  30.      border-radius: px;      
  31. }     

Javascript 

通过getElementById获取节点,判断浏览器的兼容性,对于不支持FileReader接口的浏览器将给出一个提示并禁用input,否则监听input的change事件。

JavaScript Code复制内容到剪贴板

  1. //获取上传按钮      
  2. var input = document.getElementById("upload");       
  3. if(typeof FileReader==='undefined'){       
  4.      //result.innerHTML = "抱歉,你的浏览器不支持 FileReader";       
  5.      input.setAttribute('disabled','disabled');       
  6. }else{       
  7.      input.addEventListener('change',readFile,false);       
  8. }  

然后,当file_input的change事件触发时,调用函数readFile()。在readFile中,我们首先获取file对象,然后通过file的type属性来检测文件类型,我们当然只允许选择图像类型的文件,然后我们new一个FileReader实例,并调用readAsDataURL方法来读取选中的图像文件,最后在onload事件中,获取到成功读取的文件内容,并以插入一个img节点的方式显示选中的图片。

JavaScript Code复制内容到剪贴板

  1. function readFile(){       
  2.      var file = this.files[];       
  3.      if(!/image/w+/.test(file.type)){       
  4.          alert("文件必须为图片!");       
  5.          return false;       
  6.      }       
  7.      var reader = new FileReader();       
  8.      reader.readAsDataURL(file);       
  9.      //当文件读取成功便可以调取上传的接口,想传哪里传哪里(PS: 你们可以把你们的靓照偷偷发给我!)      
  10.      reader.onload = function(e){       
  11.          var data = this.result.split(',');      
  12.          var tp = (file.type == 'image/png')? 'png': 'jpg';      
  13.          var a = data[];      
  14.          //需要上传到服务器的在这里可以进行ajax请求      
  15.          ... ...      
  16.      }      
  17. };     

写到这里我们已经完成了图片上传的功能了,大家有兴趣的自己动手尝试一下,不懂的地方或者我写错的地方一定要找我哦。 FileReader的方法和事件

必威官网亚洲体育 2

移动端、PC端通用代码, 废话不多说了,说一下今天给大家分享的是 html5上传图片。我们是在移动端使用的,但是这个在pc上...

html5 canvas移动浏览器上实现图片压缩上传,

最近在移动端设计头像上传功能时,原本是以<input type="file">直接通过formData上传,然而实际使用情况是:对于过大的图片(高像素手机所拍摄的照片等)上传时间过长会导致上传失败,而每次都上传原始大小的图片(后台处理压缩)十分影响用户体验,所以研究了一下通过canvas压缩图片并上传的方法,以下是整理的一些思路和心得:

一、<input type="file">获取本地图片,并将图片绘制到画布中。此处的难点在于:由于浏览器的保护机制,无法直接获取到本地文件的图片路径,所以需要将本地图片编译成base64格式再做上传,代码如下:

JavaScript Code复制内容到剪贴板

  1. var result = document.getElementById("/* 出错信息显示块 */");   
  2. var input = document.getElementById("/* 上传文件标签 */");   
  3.   
  4. if(typeof FileReader === 'undefined'){   
  5.   result.innerHTML = "<p class='warn'>抱歉,你的浏览器不支持 FileReader</p>";   
  6.   input.setAttribute('disabled','disabled');   
  7. }else{   
  8.   input.addEventListener('change',readFile,false);   
  9. }   
  10.   
  11. function readFile(){   
  12.   var file = this.files[0];   
  13.   if(!/image/w+/.test(file.type)){   
  14.     alert("请确保文件为图像类型");   
  15.     return false;   
  16.   }   
  17.   var reader = new FileReader();   
  18.   reader.readAsDataURL(file);   
  19.   reader.onload = function(e){   
  20.     //  this.result 编译后的图像编码,可直接用src显示   
  21.   }   
  22. }   

二、图像在canvas中的处理

JavaScript Code复制内容到剪贴板

  1. var c=document.getElementById("/* canvas标签的id */");   
  2. var cxt=c.getContext("2d");   
  3. var img=new Image();   
  4. img.src=/* 获取的图片编码地址 */;   
  5. var width = img.width;   
  6. var height = img.height;   
  7. dic = height / width;   
  8. c.width = 200;  //图片压缩的标准,这里是按照定款200px计算   
  9. c.height = 200 * dic;   
  10. cxt.clearRect(0,0,200,200*dic);   
  11. cxt.drawImage(img,0,0,200,200*dic);   
  12. var finalURL = c.toDataURL();     
  13. //  最终得到的 finalURL 即为压缩后的图片编码,可用来上传或者直接生成img标签   

这里需要注意的几点是:

1、本地调试时会有一个报错,原因为跨域问题,需要再服务端调试;

2、canvas中的drawImage()方法具备图像剪裁功能,但将图像拉伸和剪裁同时写入的话,会优先执行剪裁的方法;

3、使用AJAX上传图像编码时,编码内的加号会被转成空格上传导致后台编译失败;

4、关于对图片区域选择上传的方法尚在尝试阶段,后续会补上心得。

以上就是本文的全部内容,希望对大家的学习有所帮助。

原文:

canvas移动浏览器上实现图片压缩上传, 最近在移动端设计头像上传功能时,原本是以input type=file直接通过formData上传,然而实际使用情...

HTML5实现多张图片上传功能,

图片上传之前也有写过,不过是单张上传的,最近有个业务需求是需要多张上传的,于是乎从新改写了一下

HTML结构:

XML/HTML Code复制内容到剪贴板

  1. <div class="container">  
  2.     <label>请选择一个图像文件:</label>  
  3.     <input type="file" id="file_input" multiple/>  
  4. </div>  

顺便说下这个上传的主要逻辑:

·用input标签并选择type=file,记得带上multiple,不然就只能单选图片了

·绑定好input的change时间,

·重点就是如何处理这个change事件了,使用H5新的FileReader接口读取文件并打成base64编码,之后的事就是与后端同学交互着玩啦

JS代码:

JavaScript Code复制内容到剪贴板

  1. window.onload = function(){   
  2.         var input = document.getElementById("file_input");   
  3.         var result,div;   
  4.     
  5.         if(typeof FileReader==='undefined'){   
  6.             result.innerHTML = "抱歉,你的浏览器不支持 FileReader";   
  7.             input.setAttribute('disabled','disabled');   
  8.         }else{   
  9.             input.addEventListener('change',readFile,false);   
  10.         }<br>     //handler   
  11.         function readFile(){   
  12.             for(var i=0;i<this.files.length;i++){   
  13.                 if (!input['value'].match(/.jpg|.gif|.png|.bmp/i)){  //判断上传文件格式   
  14.                     return alert("上传的图片格式不正确,请重新选择")<br>          }   
  15.                 var reader = new FileReader();   
  16.                 reader.readAsDataURL(this.files[i]);   
  17.                 reader.onload = function(e){   
  18.                     result = '<div id="result"><img src="'+this.result+'" alt=""/></div>';   
  19.                     div = document.createElement('div');   
  20.                     div.innerHTML = result;   
  21.                     document.getElementById('body').appendChild(div);    //插入dom树                      <br>          }   
  22.             }   
  23.         }   
  24.     }   

上传多张图片难道就这样实现了吗0.0

然而并没有,这样只是将图片转换成base64编码后再前端显示,一刷新什么都没有

插入图片后,打开开发者工具看html结构是这样的

 必威官网亚洲体育 3

现实的做法是,我们在处理函数里将文件队列里的文件发送到后端,后端同学呢返回文件对应的MD5加密过文件和路径给前端,前端就拿着这个路径渲染到页面上。

之后再把MD5文件传回给后端,因为上传完后前端一般有删除图片的操作,回传目的就是告诉后端确认那些图片是我们想要的,后端存入数据库里。

说下用jquery如何交互吧

JavaScript Code复制内容到剪贴板

  1. function readFile(){   
  2.             var fd = new FormData();   
  3.             for(var i=0;i<this.files.length;i++){   
  4.                 var reader = new FileReader();   
  5.                 reader.readAsDataURL(this.files[i]);   
  6.                 fd.append(i,this.files[i]);<br>          }   
  7.                 $.ajax({   
  8.                     url : '',   
  9. 不过是单张上传的,而每次都上传原始大小的图片(后台处理压缩)十分影响用户体验。                    type : 'post',   
  10.                     data : fd,   
  11.                     success : function(data){   
  12.                         console.log(data)   
  13.                    }    
  14.                 })   
  15. }      

FormData也是H5的新接口,用来模拟表单控件的提交,最大的好处呢就是可以提交二进制文件

然后success的回调里面我们拿回了想要的数据后呢,就可以将图片插进去页面啦,类似之前的做法~

上个效果图:

必威官网亚洲体育 4

以上就是本文的全部内容,希望对大家的学习有所帮助。

原文:

图片上传之前也有写过,不过是单张上传的,最近有个业务需求是需要多张上传的,于是乎从新改写了一下...