httml 5 FileReaderを使って画像を取得し、サーバに非同期でアップロードする(iframeは使用しない).

httml 5 FileReaderを使って画像を取得し、サーバに非同期でアップロードする(iframeは使用しない).
原理:
1.FileReaderを使って画像を読み取るbase 64符号化
2.ajaxを使って、写真のbase 64をサーバーにエンコードします.
3.postを受信したデータに基づいて、ピクチャのタイプ(jpg、gif、png)を分析し、base 64_をdecode後のデータは、対応するタイプのピクチャファイルを生成します.
html数:

 
  
  
  

  

  
  window.onload = function(){

    //     
    document.getElementById('img').onchange = function(){

        var img = event.target.files[0];

        //       
        if(!img){
            return ;
        }

        //       
        if(!(img.type.indexOf('image')==0 && img.type && /\.(?:jpg|png|gif)$/.test(img.name)) ){
            alert('     jpg,gif,png');
            return ;
        }

        var reader = new FileReader();
        reader.readAsDataURL(img);

        reader.onload = function(e){ // reader onload start
            // ajax     
            $.post("server.php", { img: e.target.result},function(ret){
                if(ret.img!=''){
                    alert('upload success');
                    $('#showimg').html('<img src="' + ret.img + '">');
                }else{
                    alert('upload fail');
                }
            },'json');
        } // reader onload end
    }

  }
  

 

 
  
  html5 FileReader    ，         (not iframe)
  
     
  

   

server.php

$photo);
echo json_encode($ret);
?>