保存生成的二维码 png 但收到 404 Not Found 错误消息
Saving a generated QR code png but getting 404 Not Found error message
我正在尝试从 HTML 输入元素的值生成二维码:
HTML, CSS, JS代码:
index.php
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="icon" href="https://codingbirdsonline.com/wp-content/uploads/2019/12/cropped-coding-birds-favicon-2-1-192x192.png" type="image/x-icon">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js" integrity="sha384-LtrjvnR4Twt/qOuYxE721u19sVFLVSA4hf/rRt6PrZTmiPltdZcI7q7PXQBYTKyf" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<title>Send Email Example</title>
<style>
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-9 col-md-7 col-lg-5 mx-auto">
<div class="card card-signin my-5">
<div class="card-body">
<h5 class="card-title text-center">Generate QR Code</h5>
<form id="generateQrForm" class="form-signin">
<div class="form-label-group">
<label for="inputEmail">Text For QR <span style="color: #FF0000">*</span></label>
<input type="text" name="qrText" id="qrText" class="form-control" required placeholder="Enter something to generate QR">
</div> <br/>
<div id="generatedQr text-center">
<img src="" id="generatedQrImg" class="center-block">
</div> <br/>
<button type="submit" name="generateQrBtn" id="generateQrBtn" class="btn btn-lg btn-primary btn-block text-uppercase" >Generate QR</button>
</form>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="generate_qr_js.js"></script>
</script>
</body>
jQuery代码:
generate_qr_js.js
$("form#generateQrForm").on("submit",function (e) {
e.preventDefault();
var qrText = $("#qrText").val();
$.post("generate_qr_script.php",{generateQr:'generateQr',qrText:qrText},function (response) {
var data = response.split('^');
var generateQrImgPath = data[1];
$("#generatedQrImg").attr("src",generateQrImgPath);
})
});
PHP代码:
generate_qr_script.php
<?php
include "library/phpqrcode/qrlib.php";
if (isset($_POST['generateQr']) == 'generateQr')
{
$qrText = $_POST['qrText']; // receive the text for QR
$directory = "generated_qr/"; // folder where to store QR
$fileName = 'QR'.rand().'.png'; // generate random name of QR image
QRcode::png($qrText, $directory.$fileName, 'L', 4, 2); // library function to generate QR
echo "success^".$directory.$fileName; // returns the qr-image path
}
?>
我运行这3个代码连同phpqrcode库在一个文件夹下导入generate_qr_script.php文件。当我使用 XAMPP 服务器访问 index.php 网站时,出现“404 Not Found”错误,如下所示:
查看源代码时,图片源生成成功,但网页上没有显示。
我想做的是生成一个 QR 码,捕获用户输入到 HTML 代码中编写的文本框中的内容。理想情况下,最好将条形码存储到同一文件夹内的本地计算机文件中,但代码不会加载所需的二维码 png。
如果有人对我出错的地方有任何建议,或者对生成条形码有更好的想法,请告诉我。
我想我通过更改我想以某种方式保存图像的文件权限来修复它!
我正在尝试从 HTML 输入元素的值生成二维码:
HTML, CSS, JS代码:
index.php
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="icon" href="https://codingbirdsonline.com/wp-content/uploads/2019/12/cropped-coding-birds-favicon-2-1-192x192.png" type="image/x-icon">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js" integrity="sha384-LtrjvnR4Twt/qOuYxE721u19sVFLVSA4hf/rRt6PrZTmiPltdZcI7q7PXQBYTKyf" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<title>Send Email Example</title>
<style>
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-9 col-md-7 col-lg-5 mx-auto">
<div class="card card-signin my-5">
<div class="card-body">
<h5 class="card-title text-center">Generate QR Code</h5>
<form id="generateQrForm" class="form-signin">
<div class="form-label-group">
<label for="inputEmail">Text For QR <span style="color: #FF0000">*</span></label>
<input type="text" name="qrText" id="qrText" class="form-control" required placeholder="Enter something to generate QR">
</div> <br/>
<div id="generatedQr text-center">
<img src="" id="generatedQrImg" class="center-block">
</div> <br/>
<button type="submit" name="generateQrBtn" id="generateQrBtn" class="btn btn-lg btn-primary btn-block text-uppercase" >Generate QR</button>
</form>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="generate_qr_js.js"></script>
</script>
</body>
jQuery代码:
generate_qr_js.js
$("form#generateQrForm").on("submit",function (e) {
e.preventDefault();
var qrText = $("#qrText").val();
$.post("generate_qr_script.php",{generateQr:'generateQr',qrText:qrText},function (response) {
var data = response.split('^');
var generateQrImgPath = data[1];
$("#generatedQrImg").attr("src",generateQrImgPath);
})
});
PHP代码:
generate_qr_script.php
<?php
include "library/phpqrcode/qrlib.php";
if (isset($_POST['generateQr']) == 'generateQr')
{
$qrText = $_POST['qrText']; // receive the text for QR
$directory = "generated_qr/"; // folder where to store QR
$fileName = 'QR'.rand().'.png'; // generate random name of QR image
QRcode::png($qrText, $directory.$fileName, 'L', 4, 2); // library function to generate QR
echo "success^".$directory.$fileName; // returns the qr-image path
}
?>
我运行这3个代码连同phpqrcode库在一个文件夹下导入generate_qr_script.php文件。当我使用 XAMPP 服务器访问 index.php 网站时,出现“404 Not Found”错误,如下所示:
查看源代码时,图片源生成成功,但网页上没有显示。
我想做的是生成一个 QR 码,捕获用户输入到 HTML 代码中编写的文本框中的内容。理想情况下,最好将条形码存储到同一文件夹内的本地计算机文件中,但代码不会加载所需的二维码 png。
如果有人对我出错的地方有任何建议,或者对生成条形码有更好的想法,请告诉我。
我想我通过更改我想以某种方式保存图像的文件权限来修复它!