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 \'\'; } }