PC 側の QR コードのスキャンとアップロードは、近年、開発分野で注目を集めています。ローカル ファイルをサーバーに簡単にアップロードでき、QR コード スキャンを使用して従来のアップロード方法を置き換えることができ、より便利で効率的です。 。この記事では、PHPを使用してPCスキャンとアップロードを実装する方法を紹介します。
PC のスキャンとアップロードについては、まずいくつかの概念を理解する必要があります。 1 つ目は QR コードの生成とスキャンの原理、2 つ目はファイルのアップロードを実装する PHP のテクノロジです。
QRコードの生成とスキャンの原理
QRコードは、大量の情報を保存できるグラフィックコードです。リンク、テキスト、地図、連絡先詳細など、さまざまな状況で使用できます。 QR コードを生成するにはさまざまな方法がありますが、最も一般的に使用されるのは、JavaScript フレームワーク QRCode.js を使用することです。このフレームワークを通じて、テキスト、URL、その他の情報から対応する QR コードを生成できます。
QRコードをスキャンする場合、携帯電話スキャンソフトウェアを使用して、携帯電話のカメラでQRコードをスキャンし、スキャンを通じてQRコードによって表される情報を取得できます。 PC側では、ZbarなどのQRコードスキャンソフトウェアを使用してQRコードをスキャンすることもできます。
PHP はファイルアップロードテクノロジーを実装しています
PHP は非常に人気のあるサーバーサイドスクリプト言語であり、Web 開発の分野で重要な役割を果たしています。ファイルのアップロードに関して、PHP は非常に便利なファイル アップロード クラス -upload クラスを提供します。
アップロード クラスを使用してファイルのアップロードを実装する場合、単にクラスをインスタンス化し、対応するメソッドを使用してファイルをアップロードするだけです。その中で重要なメソッドには、upload()、getFileName()、getErrorMsg() などが含まれます。
PHP は PC コードのスキャンとアップロードを実装します
上記の基本的な知識があれば、PC コードのスキャンとアップロード機能の実装を開始できます。ここでは、バックグラウンド ファイル処理とフロントエンド ファイル生成の 2 つの部分に分けて説明します。
バックグラウンドファイル処理
1. ファイルアップロードインターフェース
まず、ファイルをアップロードするためのインターフェースを実装する必要があります。これは、フロントデスクから送信されるファイルストリームとアップロードする必要があるファイル情報を処理するために使用されます。ファイルの種類やファイルサイズが異なる場合は、アップロードする画像のサイズや種類を制限するなど、特別な処理を行う必要があります。
コード例:
<code class="php"><?php
header('Content-type: application/json');
$FILE_BASE = './files/';
$MAX_SIZE = 10 * 1024 * 1024;//10M
$ALLOW_FILE_SUFFIX = ['png', 'jpg', 'jpeg', 'bmp', 'gif'];//允许上传的文件类型
$max_size_POST = ini_get('post_max_size');
$max_size_UPLOAD = ini_get('upload_max_filesize');
$max_size = min($MAX_SIZE, getBytes($max_size_POST), getBytes($max_size_UPLOAD));
$filename = $_POST['filename'];
if (empty($filename)) {
echo json_encode(['status' => 'error', 'msg' => 'filename is empty']);
return;
}
if(empty($_FILES) || empty($_FILES['file'])){
echo json_encode(['status' => 'error', 'msg' => 'file is empty']);
return;
}
$file_size = $_FILES['file']['size'];
if($file_size > $max_size){
echo json_encode(['status' => 'error', 'msg' => 'file size is too big']);
return;
}
$file_type = strtolower(pathinfo($_FILES["file"]["name"], PATHINFO_EXTENSION));
if(!in_array($file_type, $ALLOW_FILE_SUFFIX)){
echo json_encode(['status' => 'error', 'msg' => 'file type is not allowed']);
return;
}
if(!is_dir($FILE_BASE)){
mkdir($FILE_BASE, 0777, true);
}
$file_path = $FILE_BASE.$filename;
if(move_uploaded_file($_FILES["file"]["tmp_name"], $file_path)){
echo json_encode(['status' => 'success', 'msg' => 'upload success']);
}else{
echo json_encode(['status' => 'error', 'msg' => 'upload fail']);
}
function getBytes($val)
{
$val = trim($val);
$last = strtolower($val[strlen($val) - 1]);
$val = preg_replace('/[^0-9]/', '', $val);
switch ($last) {
case 'g':
$val *= 1024 * 1024 * 1024;
break;
case 'm':
$val *= 1024 * 1024;
break;
case 'k':
$val *= 1024;
break;
}
return $val;
}
?></code>2. QRコードの生成
QRコードの生成は、QRCode.jsフレームワークを使用して実現できます。アップロードするファイル名と関連情報をQRコード情報に変換し、対応するQRコードを生成する必要があります。
コード例:
<code class="php"><?php $filename = $_POST['filename']; $path = 'http://localhost/'; //服务器地址 $text = urlencode(json_encode(['filename' => $filename, 'path' => $path])); $url = "http://qr.liantu.com/api.php?text=" . $text; echo $url; //返回二维码地址 ?></code>
フロントエンドファイル生成
フロントエンドでは、QR コードを生成し、右側のプレビュー ボックスに表示する必要があります。さらに、ファイルをアップロードするための操作ボタンと対応するプロンプトも追加する必要があります。
コードサンプル:
<code class="html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>PC扫码上传</title>
<style type="text/css">
.upload {
display: inline-block;
background: #1B96F3;
color: #fff;
padding: 8px 12px;
border-radius: 4px;
cursor: pointer;
outline: none;
}
.upload:hover {
background-color: #2A87CB;
}
.img-preview {
width: 200px;
height: 200px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.img-preview img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="qrcode-container">
<div class="qrcode"></div>
</div>
<div class="upload-container">
<input type="file" id="file" style="display:none" onchange="uploadFile(this)"/>
<button class="upload" onclick="document.getElementById('file').click()">上传文件</button>
<div class="alert"></div>
</div>
<div class="img-preview-container">
<h4>预览</h4>
<div class="img-preview"></div>
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<script type="text/javascript">
function createQrcode(url) {
var qrcode = new QRCode(document.querySelector('.qrcode'), {
text: url,
width: 200,
height: 200,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
}
function showPreview(file) {
var fr = new FileReader();
fr.onload = function () {
$('<img>').attr('src', fr.result).appendTo('.img-preview');
}
fr.readAsDataURL(file);
}
function uploadFile(obj) {
var file = obj.files[0];
var fd = new FormData();
fd.append('file', file);
fd.append('filename', file.name);
$.ajax({
url: '/upload.php',
type: 'POST',
data: fd,
processData: false,
contentType: false,
success: function (data) {
if (data.status == 'success') {
createQrcode(data.msg);
showPreview(file);
$('.alert').text('上传成功');
} else {
$('.alert').text('上传失败');
}
},
error: function () {
$('.alert').text('上传失败');
}
});
}
</script>
</body>
</html></code>要約すると、PC スキャンコードのアップロードの開発は正常に完了しました。このプロセスでは、QR コードの生成とスキャンの原理、および PHP を使用したファイル アップロードの技術を学び、この 2 つを組み合わせて PC コードのスキャンとアップロード機能の実装を完了しました。開発者にとって、このより便利で効率的なアップロード方法は、開発における注目の話題と需要となるでしょう。
以上がPCスキャンコードアップロードPHP実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
