您能否看一下這段代碼，讓我知道為什么我無法通過 jQuery 中的 Ajax 呼叫獲取 PHP 生成的驗證碼（影像）？
我所擁有的captcha.php只是這個
<?php
session_start();
$random_alpha = md5(rand());
$captcha_code = substr($random_alpha, 0, 6);
$_SESSION["captcha_code"] = $captcha_code;
$target_layer = imagecreatetruecolor(70,30);
$captcha_background = imagecolorallocate($target_layer, 255, 160, 119);
imagefill($target_layer,0,0,$captcha_background);
$captcha_text_color = imagecolorallocate($target_layer, 0, 0, 0);
imagestring($target_layer, 5, 5, 5, $captcha_code, $captcha_text_color);
header("Content-type: image/jpeg");
imagejpeg($target_layer);
?>
這是我的 jQuery Ajax 請求
$(function() {
var getCaptcha = $.ajax({
type: "GET",
url: 'captcha.php',
cache: false,
dataType: 'image/jpeg',
success: function (data) {
$("#captcha").attr("src", 'data:image/jpeg;base64,' data);
}
});
getCaptcha.fail(function (jqXHR, textStatus) {
console.log("Request failed: " textStatus);
});
});
在我的控制臺上，我收到了這個錯誤
請求失敗：parsererror
并且在源代碼中的 src#captcha顯示未知！
uj5u.com熱心網友回復：
PHP 腳本發送的影像標頭不是您期望的 base64 編碼資料，因此請嘗試：
<?php
session_start();
$random_alpha = md5(rand());
$captcha_code = substr($random_alpha, 0, 6);
$_SESSION["captcha_code"] = $captcha_code;
$target_layer = imagecreatetruecolor(70,30);
$captcha_background = imagecolorallocate($target_layer, 255, 160, 119);
imagefill($target_layer,0,0,$captcha_background);
$captcha_text_color = imagecolorallocate($target_layer, 0, 0, 0);
imagestring( $target_layer, 5, 5, 5, $captcha_code, $captcha_text_color);
# create a temp file to save the image
$tmp=tempnam( sys_get_temp_dir(), 'captcha' );
# save the image & then read it's contents
imagejpeg( $target_layer, $tmp );
$data=file_get_contents( $tmp );
# clean up
imagedestroy( $target_layer );
unlink( $tmp );
# send the base 64 data string
exit( base64_encode( $data ) );
?>
然后稍微修改ajax，去掉預期的dataType
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title></title>
<script src='//code.jquery.com/jquery-latest.js'></script>
<script>
$(function() {
var getCaptcha = $.ajax({
type: "GET",
url: 'captcha.php',
cache: false,
success: function (data) {
$("#captcha").attr("src", 'data:image/jpeg;base64, ' data );
}
});
getCaptcha.fail(function (jqXHR, textStatus) {
console.log("Request failed: " textStatus);
});
});
</script>
</head>
<body>
<img id='captcha' />
</body>
</html>
要在不使用 PHP 編碼的情況下完成相同的操作（根據您在下面評論中的問題） - 是的，可以做到。以下省略了 jQuery 代碼，因為我不使用 jQuery 并且不知道要使用的方法，因此一些非常簡單的 vanilla javascript 和您的原始 PHP 代碼將起作用。
<?php
session_start();
$random_alpha = md5(rand());
$captcha_code = substr($random_alpha, 0, 6);
$_SESSION["captcha_code"] = $captcha_code;
$target_layer = imagecreatetruecolor(70,30);
$captcha_background = imagecolorallocate($target_layer, 255, 160, 119);
imagefill( $target_layer,0,0,$captcha_background );
$captcha_text_color = imagecolorallocate($target_layer, 0, 0, 0);
imagestring( $target_layer, 5, 5, 5, $captcha_code, $captcha_text_color);
header("Content-type: image/jpeg");
exit( imagejpeg( $target_layer ) );
?>
和客戶端：
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title></title>
<script>
fetch('captcha.php')
.then( r=>r.blob() )
.then( data=>{
document.getElementById('captcha').src=URL.createObjectURL( data );
})
</script>
</head>
<body>
<img id='captcha' />
</body>
</html>
uj5u.com熱心網友回復：
看起來您從 ajax 呼叫回傳的內容與您嘗試顯示的內容之間存在輕微的脫節。
這會以自然二進制形式發送 jpeg。
header("Content-type: image/jpeg");
imagejpeg($target_layer);
在這里，您將其視為base64_encoded影像。
$("#captcha").attr("src", 'data:image/jpeg;base64,' data);
那時您可能想要做一個實際的base64_encode()并將其發送回或在 JS 端對其進行編碼。
例如
$("#captcha").attr("src", 'data:image/jpeg;base64,' btoa(data));
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/467650.html
上一篇：使用Python壓縮檔案夾串列