js獲取base64格式圖片預覽上傳並用php保存到本地服務器指定文件夾

時間 2019-12-14

標籤獲取 base64 base 格式圖片預覽上傳並用 php 保存本地服務器指定文件夾欄目 JavaScript 简体版

原文原文鏈接

html：php

<!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：html

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

相關標籤/搜索