js获取base64格式图片预览上传并用php保存到本地服务器指定文件夹
html：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input id="load" type="file" onchange="upload(this.files)" name="myfile"/> <div id="dd"></div> <script src="jquery-1.9.1.min.js"></script> <script> function upload(f){ var str = ""; var imgtype=""; var gs=$("#load").val(); //获取图片url var src=""; imgtype = gs.toLowerCase().split('.');//截取图片格式 png，jpg，是一个数组 imgtype =imgtype[1];//选取 for(var i=0;i<f.length;i++){ var reader = new FileReader(); reader.readAsDataURL(f[i]); reader.onload = function(e){ src=e.target.result;//base64图片 str+="<img src='"+e.target.result+"'/>"; $("#dd").html(str); //预览图片 $.ajax({ url:"chul.php", type:"post", data:{ src:src, imgtype:imgtype }, success:function(data){ console.log(data) } }) } } } </script> </body> </html>
php：
<?php header('Content-type:text/html;charset=utf-8'); //转换base64图片 必须手动建一个img文件夹 define('UPLOAD_DIR', 'img/'); $img = $_POST['src']; $imgtype=$_POST["imgtype"]; //判断图片格式类型 if($imgtype=="png"){ $img = str_replace('data:image/png;base64,', '', $img); } if($imgtype=="jpg"){ $img = str_replace('data:image/jpeg;base64,', '', $img); } $img = str_replace(' ', '+', $img); $data = base64_decode($img); //判断图片格式类型 if($imgtype=="png"){ $imgurl = UPLOAD_DIR . uniqid(). '.png'; } if($imgtype=="jpg"){ $imgurl = UPLOAD_DIR . uniqid(). '.jpg'; } echo $img; //把图片写入文件中 $success = file_put_contents($imgurl, $data); ?>
