pc掃碼上傳 php實現
- PHP中文网原創
- 2023-05-05 12:47:35127瀏覽
PC端掃碼上傳是近年來開發領域中的一個熱門話題，它可以方便地將本地文件上傳到伺服器，並且使用掃碼的方式替代傳統的上傳方式，更加便捷和高效。在本文中，我們將介紹如何用PHP實作PC掃碼上傳。
對於PC端掃碼上傳，我們首先需要了解幾個概念。首先是二維碼產生和掃描的原理，其次是PHP實作檔案上傳的技術。
二維碼產生和掃描原理
二維碼是一種能夠儲存大量資訊的圖形碼。它可以用於各種場合，例如連結、文字、地圖、聯絡資訊等等。產生二維碼有很多種方式，其中最常用的是使用JavaScript框架QRCode.js實作。透過這個框架，我們可以實現將文字、網址等資訊產生對應的二維碼。
在掃描二維碼時，我們可以利用手機掃描軟體使用手機相機掃描二維碼，透過掃描取得二維碼所代表的資訊。對於PC端，我們也可以使用如Zbar等掃碼軟體進行掃碼操作。
PHP實作檔案上傳技術
PHP是一種非常流行的服務端腳本語言，在Web開發領域中有著重要的地位。對於檔案上傳，PHP提供了一個非常方便的檔案上傳類別—upload類別。
在使用upload類實作檔案上傳時，我們只需要簡單地實例化該類，並使用相應的方法進行檔案上傳即可。其中，重要的方法包括：upload()、getFileName()、getErrorMsg()等。
PHP實作PC掃碼上傳
有了以上基礎知識，我們可以開始著手實作PC掃碼上傳功能了。此處我們將分為兩個部分，分別為後台文件處理和前端文件產生。
後台檔案處理
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.產生二維碼
產生二維碼可以使用QRCode.js框架來實作。我們需要將需要上傳的檔案名稱和相關資訊轉換為二維碼資訊後產生對應的二維碼。
程式碼範例：
<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>
前端檔案產生
在前端，我們需要產生一個二維碼並在右側預覽框中顯示出來。此外，我們還需要增加上傳文件的操作按鈕和相應的提示資訊。
程式碼範例：
<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掃碼上傳的開發。在這個過程中，我們學習了二維碼產生和掃描的原理，以及PHP實作檔案上傳的技術，並且將兩者結合起來完成了PC掃碼上傳功能的實作。對於開發人員來說，這種更為便利和高效的上傳方式會成為開發中的熱門話題和需求。
以上是pc掃碼上傳 php實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！