使用html5 FileReader获取图片，并异步上传到服务器(不使用iframe)

使用html5 FileReader获取图片，并异步上传到服务器(不使用iframe)

 

原理：

1.使用FileReader 读取图片的base64编码

2.使用ajax，把图片的base64编码post到服务器。

3.根据接收到post的数据分析图片的类型(jpg,gif,png)，并把base64_decode后的数据生成对应类型的图片文件。

 

html：

 

[javascript] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. <!DOCTYPE HTML PUBLIC>  
  2. <html>  
  3.  <head>  
  4.   <meta charset="utf-8">  
  5.   <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>  
  6.   <title>使用html5 FileReader获取图片，并异步上传到服务器(not iframe)</title>  
  7.   
  8.   <style type="text/css">  
  9.     body{margin: 0px; background:#f2f2f0;}  
  10.     p{margin:0px;}  
  11.     .title{color:#FFFF00; background:#000000; text-align:center; font-size:24px; line-height:50px; font-weight:bold;}  
  12.     .file{position:absolute; width:100%; font-size:90px;}  
  13.     .filebtn{display:block; position:relative; height:110px; color:#FFFFFF; background:#06980e; font-size:48px; line-height:110px; text-align:center; cursor:pointer; border: 3px solid #cccccc;}  
  14.     .filebtn:hover{background:#04bc0d;}  
  15.     .showimg{margin:10px auto 10px auto; text-align:center;}  
  16.   </style>  
  17.   
  18.   <script type="text/javascript">  
  19.   window.onload = function(){  
  20.   
  21.     // 选择图片  
  22.     document.getElementById('img').onchange = function(){  
  23.   
  24.         var img = event.target.files[0];  
  25.   
  26.         // 判断是否图片  
  27.         if(!img){  
  28.             return ;  
  29.         }  
  30.   
  31.         // 判断图片格式  
  32.         if(!(img.type.indexOf('image')==0 && img.type && /\.(?:jpg|png|gif)$/.test(img.name)) ){  
  33.             alert('图片只能是jpg,gif,png');  
  34.             return ;  
  35.         }  
  36.   
  37.         var reader = new FileReader();  
  38.         reader.readAsDataURL(img);  
  39.   
  40.         reader.onload = function(e){ // reader onload start  
  41.             // ajax 上传图片  
  42.             $.post("server.php", { img: e.target.result},function(ret){  
  43.                 if(ret.img!=''){  
  44.                     alert('upload success');  
  45.                     $('#showimg').html('<img src="' + ret.img + '">');  
  46.                 }else{  
  47.                     alert('upload fail');  
  48.                 }  
  49.             },'json');  
  50.         } // reader onload end  
  51.     }  
  52.   
  53.   }  
  54.   </script>  
  55.   
  56.  </head>  
  57.   
  58.  <body>  
  59.   <p class="title">使用html5 FileReader获取图片，并异步上传到服务器(not iframe)</p>  
  60.   <p><input type="file" class="file" id="img"><label class="filebtn" for="img" title="JPG,GIF,PNG">请选择图片</label></p>  
  61.   <p class="showimg" id="showimg"></p>  
  62.  </body>    
  63. </html>  

server.php

 

[php] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. <?php  
  2. $img = isset($_POST['img'])? $_POST['img'] : '';  
  3.   
  4. // 获取图片  
  5. list($type, $data) = explode(',', $img);  
  6.   
  7. // 判断类型  
  8. if(strstr($type,'image/jpeg')!==''){  
  9.     $ext = '.jpg';  
  10. }elseif(strstr($type,'image/gif')!==''){  
  11.     $ext = '.gif';  
  12. }elseif(strstr($type,'image/png')!==''){  
  13.     $ext = '.png';  
  14. }  
  15.   
  16. // 生成的文件名  
  17. $photo = time().$ext;  
  18.   
  19. // 生成文件  
  20. file_put_contents($photo, base64_decode($data), true);  
  21.   
  22. // 返回  
  23. header('content-type:application/json;charset=utf-8');  
  24. $ret = array('img'=>$photo);  
  25. echo json_encode($ret);  
  26. ?>  

 

posted @ 2016-08-23 09:56  午时的海  阅读(400)  评论(0)  编辑  收藏  举报