圖片base64預覽及上傳PHP處理

一、前端代碼

<div id="img"/>
<input type="file" id="img-select"/>

<input type='button' id='submit'/>

var newUrl；
function imgPreview() {//將圖片轉成base64，實現預覽效果
    var files = this.files;
    var file = files[0];
    var reader = new FileReader();

    reader.readAsDataURL(file);

    reader.onload = function() {

        // 圖片base64化
        var newUrl= this.result;
       $('#img').style.backgroundImage='url(' + newUrl+ ')';//預覽
    };

}
$('#img-select').addEventListener('change',imgPreview);

$("#submit").on('click', function(){
        $.ajax({
            url:"onload.php",
            type:'POST',
            dataType:'json',
            data:{img:newUrl},
            success:function(list) {
                console.log(list)
                location.href ="跳轉頁面";                
            },
            error:function(){
               console.log("請求失敗")

             }
        });
});

二、PHP代碼

$img=$_POST['img']；

$base64_body = substr(strstr($img,','),1);//去除頭部 $img = base64_decode($base64_body);//解碼 //存儲or建立圖片 $path = "/upload/product/";//存儲路徑 if(!file_exists($path)){      mkdir($path,0777,true); } $imgName=$path.mt_rand(100,999).time().mt_rand(100,999).".jpg";//圖片存儲路徑 file_put_contents($imgName,$img);//存儲圖片