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);
?>

js获取base64格式图片预览上传并用php保存到本地服务器指定文件夹

相关推荐