前台:
<label for="file" class="img_wp" οnclick="zhengmian()" >
<img src="/m/images/z_morenxin.png" style="width: 50px;height: 50px;" alt="" id="zmz">
<img id="sc" src="/m/images/zz_shanchu.png" style="cursor:pointer;width:20px;height: 20px;position: absolute; top:0px" > <input type="file" class="file-input" accept="image/*" οnchange="getzImg(this)" style="display:none" value="" id="img_z"/> 前台:js
$("#sc").click(function (){ $(this).hide(); $("#zmz").attr('src','/m/images/z_morenxin.png'); $("#zmz").css("height","50px"); $("#zmz").css("width","50px"); }) function zhengmian(){ $('#img_z').click(); } function getzImg(imgFile){ var file = imgFile.files[0]; var reader = new FileReader(); reader.readAsDataURL(file);//将文件读取为Data URL小文件 这里的小文件通常是指图像与 html 等格式的文件 reader.onload = function(e){ $("#zmz").attr("src",e.target.result); } }
服务端:
var imgsrc=$("#zmz").attr("src");//图片数据通过POST传递服务端
$img为服务端接受的图片数据
$bankurl=$this->setimg($uid,$img,'kahao');
保存图片服务端
function setimg($uid=0,$img='',$fx='') { // 获取图片 list($type, $data) = explode(',', $img); // 判断类型 if(strstr($type,'image/jpeg')!==''){ $ext ='.jpg';// ‘.jpg’; }elseif(strstr($type,'image/gif')!==''){ $ext ='.gif'; }elseif(strstr($type,'image/png')!==''){ $ext = '.png';//‘.png’; } $yuming = str_replace(array('www','.',),'',$_SERVER["HTTP_HOST"]); if(!empty($yuming)) $yuming = $yuming.DS; // $photolj = SYS_PATH.'photos'.DS.$yuming.$fx.DS.$uid;//原图 $photo ='photos'.DS.$yuming.$fx.DS.$uid.DS.time().$ext;//原图 $fop = Import::fileop(); $fop->checkDir($photo); // $photo = SYS_PATH.'photos'.DS.$yuming.$fx.DS.$uid.DS.time().$ext;//原图 // 生成的文件名 // $photo =SYS_PATH_PHOTOS.$uid. DS .time().$ext; // file_put_contents('tupian.txt','新的图片'.$photo."\r\n",FILE_APPEND); // 生成文件 file_put_contents($photo, base64_decode($data),true); return $photo; }