ajax 提交圖片方法

問題描述：今天有一位網友 問我如何使用ajax提交圖片；我心里有兩種思路，但是代碼完全忘記了，這里記錄一下以前的代碼；
第一種：使用 form表單對象提交圖片代碼如下，不做過多解釋，如果看不懂請自行百度補全js的基本知識；
　　

var formData = new FormData($( "#submitform" )[0]); 
$.ajax({  
         url: url,  
         type: 'POST',  
         data: formData,  
         async: false,  
         cache: false,  
         contentType: false,  
         processData: false,  
         success: function (msg) {  
             
            if(msg.status == 500 || msg.status == 0){
                alert(msg.message);
                 
             }else if(msg.status == 200){
                 $('#loading-hidden').hide();
                 var jump_url = msg.data.jump_url;
                 if(jump_url){
                     alert(msg.data.message);
                     window.location.href=jump_url;
                 }else{
                     alert(msg.message);
                     window.location.reload();
                 }
                 
             }
             
         },  
         error: function (msg) {  
             if(msg.status == 500){
                $('#loading-hidden').hide();
                 $('#big-modal-tip').html(msg.message);
                 $('#myModal').modal('toggle');
             }else if(msg.status == 200){
                 $('#loading-hidden').hide();
                 alert(msg.message);
                 window.location.reload();
             } 
         }  
    });  

 

第二種方法 ： js獲取圖片的二進制文件提交

   /* 表單提交 */
    $('body').delegate('#sure-submit','click',function(){
        var avatar = $('#avatar-img-pre').attr('src');
        var cert_img = $('#cert-img-pre').attr('src');
        if(avatar == ''){
            $.alert('請上傳頭像');
            return false;
        }
        if(cert_img == ''){
            $.alert('請上傳證書');
            return false;
        }
var url = '/weixin/html5/saveUserInfo';
        var data = {'avatar':avatar,'cert_img':cert_img}
        
        $.post(url,data,function(msg){
            if(msg.status == 500){
                $.alert(msg.message);
            }else{
                $('#form-zhezhao').show();
            }

        },'json');
    

    });

    /* 上傳頭像 */
    $('body').delegate('#avatar','change',function(){
        
        var file = document.getElementById("avatar").files[0];
        if(!/image\/\w+/.test(file.type)){  
            $.alert('看清楚，這個需要圖片！');
            return false;  
        } 

        //$('.avatar-img').hide(); 
        var reader = new FileReader();  
        //將文件以Data URL形式讀入頁面  
        reader.readAsDataURL(file);  
        reader.onload=function(e){ 
            var obj = $('#avatar-img-pre');
            obj.attr('src',this.result);
            obj.prev().hide();
            obj.show();
        }  

    });
    /* 上傳證書 */
    $('body').delegate('#cert_img','change',function(){
        
        var file = document.getElementById("cert_img").files[0];
        if(!/image\/\w+/.test(file.type)){  
            $.alert('看清楚，這個需要圖片！');
            return false;  
        } 
        var reader = new FileReader();  
        //將文件以Data URL形式讀入頁面  
        reader.readAsDataURL(file);  
        reader.onload=function(e){ 
            var obj = $('#cert-img-pre');
            obj.attr('src',this.result);
            obj.prev().hide();
            obj.show();
        }  

    });

服務器 代碼：

    public function saveUserInfo(){

        $avatar_img = $this -> input -> post('avatar');
        if($avatar_img == ''){
            $this -> error('頭像必須上傳');
        }

        $cert_img = $this -> input -> post('cert_img');
        if($cert_img == ''){
            $this -> error('證書必須上傳');
        }

        // 保存頭像
        $posstart = strpos($avatar_img, '/') + 1;
        $posend = strpos($avatar_img, ';');
        $ext = substr($avatar_img, $posstart,$posend - $posstart);
        $avatar_arr = explode(',',$avatar_img);
        $avatar_img = uploadnothumb($avatar_arr[1],$ext);

        if($avatar_img == ''){
            $this -> error('頭像上傳失敗');
        }
        // 保存證書
        $posstart = strpos($cert_img, '/') + 1;
        $posend = strpos($cert_img, ';');
        $ext = substr($cert_img, $posstart,$posend - $posstart);
        $cert_arr = explode(',',$cert_img);
        $cert_img = uploadnothumb($cert_arr[1],$ext);

        if($cert_img == ''){
            $this -> error('證書上傳失敗，請重新上傳');
        }

        $data = array(

            'avatar' => $avatar_img,
            'cert_img' => $cert_img,
            'addtime' => $time,
        );


        $condition = array('id' => $id);
        $res = DB::update('app_active_zan',$data,$condition);


        if($res){
            $this -> success('添加成功');
        }else{
            $this -> error('發布失敗，稍后上傳');
        }  
        

    }

    //無壓縮上傳
    function uploadnothumb($img,$ext='jpg',$uid=0,$do=1){
        $img = base64_decode($img);　　//把二進制解析成圖片
        $path = './uploads/'.date('Ymd',time()).'/';
        createFolder($path);
        $file = $path.md5(microtime()).'.'.$ext;
        $url = ltrim($file,'.');
        if(file_put_contents($file,$img)){
            include_once './application/libraries/Image.php';
            return $url;
        }else{
            return  '';
        }

    }