首页 > 代码库 > ajax 提交图片方法
ajax 提交图片方法
问题描述:今天有一位网友 问我如何使用ajax提交图片;我心里有两种思路,但是代码完全忘记了,这里记录一下以前的代码;
第一种:使用 form表单对象提交图片代码如下,不做过多解释,如果看不懂请自行百度补全js的基本知识;
var formData = http://www.mamicode.com/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 = http://www.mamicode.com/{‘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 ‘‘; } }
ajax 提交图片方法
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。