我试图完成的是通过php将varbinary数据返回到浏览器。我什么都试过了。我已经设置了header('Content-Type: image/jpeg');，我现在正在测试这个程序，通过HTML上传一个jpeg图像，让JavaScript抓取它，然后发送一个XMLHttpRequest（）;你可以看到，如果你把base64 encoded的数据转换成二进制图像数据，那么''应该在指定的图像标签中返回到浏览器。这不管用下面是一个可复制的例子。
<?PHP
ini_set('memory_limit', '1024M');
/*
Must have more than 512MB memory_limit
*/
ini_set('error_reporting', E_ALL);
ini_set('display_errors', 'On');
function uploadImage($conn)
{
$encodedData = $_POST['URLData'];
$data = json_decode($encodedData);
$name = $data->name;
$qr = $data->qrDataUrl;
$file = $data->fileDataUrl;
$baseDataURL = explode(',', $file)[1];
$decodedData = base64_decode($baseDataURL);
echo $decodedData;
}
if (isset($_POST['URLData']))
{
try
{
$connection = array("Database" => "", "UID" =>"",
"PWD" =>"");
$conn = sqlsrv_connect('', $connection);
uploadImage($conn);
}
catch(Exception $e)
{
echo $e->getMessage();
die();
}
}
?><!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="Stylesheet2.css">
<link rel="stylesheet" href="Stylesheet.css">
<script src="javascript/qr.js"></script>
</head>
<body>
<div class="container">
<h2>Image Upload</h2>
<div class="form-group">
<label style="text-align: center;" for="image">Select JPEG Image:</label>
<div class="file-input-container">
<label class="file-input-button" for="image">Upload</label>
<div class="file-input-text">
<p id="file-text">No File Chosen</p>
</div>
</div>
<input type="file" id="image" accept="image/jpeg" onchange="handleFileSelect(event)">
</div>
<p id="message"></p>
<div style = "margin: 20px 0px 40px 0px;" id="qrcode"></div>
<p style="text-align: center; margin: 0px;">
Example of acceptable image name. <b><u>22OC48-1i</u>.jpg</b></p>
<div id="yes"></div>
</div>
</body>
<script>
function handleFileSelect(event)
{
const fileInput = event.target;
const fileNameContainer = document.getElementById('file-text');
const message = document.getElementById('message');
const qrDiv = document.getElementById("qrcode");
if (fileInput.files.length > 0)
{
const file = fileInput.files[0];
const reader = new FileReader();
fileNameContainer.innerText = file.name;
const qrcode = new QRCode("qrcode");
qrcode.makeCode(file.name.substring(0,7));
reader.onload = function(e)
{
message.innerText = "Uploading Image. Don't Leave";
const data = {
name : file.name,
qrDataUrl : encodeURIComponent(qrDiv.getElementsByTagName("img")[0].src),
fileDataUrl : e.target.result
};
console.log(data.uploadDataURL);
const xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function()
{
if (this.readyState == 4 && this.status == 200)
{
if (this.responseText == 'exists')
{
message.innerText = "Cannot Upload Duplicates.";
}
else if (this.responseText == 'uploaded')
{
document.getElementById('message').innerText = 'Image Was Uploaded';
}
else
{
document.getElementById('yes').innerHTML = '<img src="'+this.response+'" alt="Image">';
}
}
};
xhttp.open("POST", "upload.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("URLData=" + JSON.stringify(data));
}
setTimeout(function() {
reader.readAsDataURL(file);
}, 100);
}
else
{
fileNameContainer.innerText = 'No file chosen';
}
}
</script>
</html>
1条答案
按热度按时间yhived7q1#
img标记的src必须是HTTP URL或包含base64编码字符串的data-url。但据我所知，您似乎试图返回二进制数据并将其设置为src。不是这样的您可以将src设置为像
https://www.example.com/showImage.php?id=123这样的URL，它可以指向一个PHP脚本，该脚本可以从数据库或文件系统中获取图像编号123的二进制数据，并使用合适的头部回显该数据，这应该可以工作。所以我认为你只是误解了如何正确设置
img标记。