问题描述:今天有一位网友 问我如何使用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  \'\';
        }

    }

 

版权声明:本文为ailingfei原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/ailingfei/p/6744759.html