ajax 提交图片方法

Posted 2020-09-12 将心比心

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

    }