javascript - AJax post BASE64編碼到後台-php教程-PHP中文網

javascript - AJax post BASE64編碼到後台

WBOY

發布： 2016-08-25 10:37:28

原創

1388 人瀏覽過

php convert & output BASE64

<code class="php">$img = str_replace(FILE_DOMAIN , FILE_PATH, 'http://img.demo.com/2016/08/21/12121.jpg');
if(! file_exists($img)) {
    $ret = array('err_no'=>-1,'err_msg' => '商品图片不存在');
    break;
}

$img_info = getimagesize($img);
$img_base64 = "data:{$img_info['mime']};base64,".chunk_split(base64_encode(file_get_contents($img)));
$result['base64'] = $img_base64;

$ret = array('err_no' => 0, 'err_msg'=> 'succes', 'results'=> $result);

echo json_encode($ret, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE  ); exit;</code>

登入後複製

json格式回傳沒處理直接 data.results 取得的無法顯示

<code class="text">data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD//gA8Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2ODApLCBxdWFsaXR5ID0gMTAwCv/bAEMABgQFBgUEBgYFBgcHBggKEAoKCQkKFA4PDBAXFBgYFxQWFhodJR8aGyMcFhYgLCAjJicpKikZHy0wLSgwJSgpKP/bAEMBBwcHCggKEwoKEygaFhooKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKP/A....</code>

登入後複製

上面是同步的說以放到 html 標籤的li 的data-base64 你面

下面是非同步提交，先生成參數

js

<code class="js">var idArr = [];
var imgArr =[];
$(".list-group").children('li').each(function(index){
    var imgBase64 = $(this).data('base64');
    var pId = $(this).data('item');
    idArr.push(pId); imgArr.push( encodeURIComponent(imgBase64));
});

//生成参数
var _params = $.param({
    pid: idArr.join(','),
    image: imgArr.join(','),
});</code>

登入後複製

後台接收處理

php

<code class="php">$img_arr = explode(',', $params['image']);
foreach($result as $key => $val) {
    $ans_data[] = array(
        'image'   => addslashes( rawurldecode( $img_arr[$key]) ),
    );
}
                    </code>

登入後複製

接著就直接插入資料庫欄位類型是longtext，

這裡每一步json輸出的圖片都無法顯示正確

回覆內容：

php convert & output BASE64

<code class="php">$img = str_replace(FILE_DOMAIN , FILE_PATH, 'http://img.demo.com/2016/08/21/12121.jpg');
if(! file_exists($img)) {
    $ret = array('err_no'=>-1,'err_msg' => '商品图片不存在');
    break;
}

$img_info = getimagesize($img);
$img_base64 = "data:{$img_info['mime']};base64,".chunk_split(base64_encode(file_get_contents($img)));
$result['base64'] = $img_base64;

$ret = array('err_no' => 0, 'err_msg'=> 'succes', 'results'=> $result);

echo json_encode($ret, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE  ); exit;</code>

登入後複製

json格式回傳沒處理直接 data.results 取得的無法顯示

<code class="text">data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD//gA8Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2ODApLCBxdWFsaXR5ID0gMTAwCv/bAEMABgQFBgUEBgYFBgcHBggKEAoKCQkKFA4PDBAXFBgYFxQWFhodJR8aGyMcFhYgLCAjJicpKikZHy0wLSgwJSgpKP/bAEMBBwcHCggKEwoKEygaFhooKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKP/A....</code>

登入後複製

上面是同步的說以放到 html 標籤的li 的data-base64 你面

下面是非同步提交，先生成參數

js

<code class="js">var idArr = [];
var imgArr =[];
$(".list-group").children('li').each(function(index){
    var imgBase64 = $(this).data('base64');
    var pId = $(this).data('item');
    idArr.push(pId); imgArr.push( encodeURIComponent(imgBase64));
});

//生成参数
var _params = $.param({
    pid: idArr.join(','),
    image: imgArr.join(','),
});</code>

登入後複製

後台接收處理

php

<code class="php">$img_arr = explode(',', $params['image']);
foreach($result as $key => $val) {
    $ans_data[] = array(
        'image'   => addslashes( rawurldecode( $img_arr[$key]) ),
    );
}
                    </code>

登入後複製

接著就直接插入資料庫欄位類型是longtext，

這裡每一步json輸出的圖片都無法顯示正確