zoukankan      html  css  js  c++  java

  • 使用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; 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. ?>  
  • 相关阅读:
    Chrome控制台JS设置xpath定位
    logging.exception
    python去除换行和空格
    从剪切板获取的内容无法使用type函数得到数据类型
    python获取剪切板的内容
    hdoj Radar Installation
    hdoj- Windows Message Queue
    hdoj-看病要排队
    hdoj-1896 stones
    评委会打分
  • 原文地址：https://www.cnblogs.com/wicub/p/5798117.html
Copyright © 2011-2022 走看看