pc扫码上传 php实现-PHP问题-PHP中文网

首页

后端开发

PHP问题

pc扫码上传 php实现

PHP中文网

May 05, 2023 pm 12:47 PM

PC端扫码上传是近年来开发领域中的一个热门话题，它可以方便地将本地文件上传到服务器，并且使用扫码的方式替代传统的上传方式，更加便捷和高效。在本文中，我们将介绍如何用PHP实现PC扫码上传。

对于PC端扫码上传，我们首先需要了解几个概念。首先是二维码生成和扫描的原理，其次是PHP实现文件上传的技术。

二维码生成和扫描原理

二维码是一种能够存储大量信息的图形码。它可以用于各种场合，例如链接、文本、地图、联系方式等等。生成二维码有很多种方式，其中最常用的是使用JavaScript框架QRCode.js实现。通过该框架，我们可以实现将文本、网址等信息生成相应的二维码。

在扫描二维码时，我们可以利用手机扫描软件使用手机摄像头扫描二维码，通过扫描获取二维码所代表的信息。对于PC端，我们也可以使用如Zbar等扫码软件进行扫码操作。

PHP实现文件上传技术

PHP是一种非常流行的服务端脚本语言，在Web开发领域中有着重要的地位。对于文件上传，PHP提供了一个非常方便的文件上传类—upload类。

在使用upload类实现文件上传时，我们只需要简单地实例化该类，并使用相应的方法进行文件上传即可。其中，重要的方法包括：upload()、getFileName()、getErrorMsg()等。

PHP实现PC扫码上传

有了以上基础知识，我们可以开始着手实现PC扫码上传功能了。此处我们将分为两个部分，分别为后台文件处理和前端文件生成。

后台文件处理

1.上传文件接口

首先我们需要实现一个上传文件的接口，用于处理前台传输过来的文件流和我们需要上传的文件信息。针对不同的文件类型和文件大小，我们需要进行特别处理，例如限制上传图片的大小和类型等。

代码示例：

<?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;
}
?>

2.生成二维码

生成二维码可以使用QRCode.js框架来实现。我们需要将需要上传的文件名和相关信息转化为二维码信息后生成相应的二维码。

代码示例：

<?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; //返回二维码地址
?>

前端文件生成

在前端，我们需要生成一个二维码并在右侧预览框中显示出来。此外，我们还需要增加上传文件的操作按钮和相应的提示信息。

代码示例：

<!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>

综上所述，我们成功地完成了PC扫码上传的开发。在这个过程中，我们学习了二维码生成和扫描的原理，以及PHP实现文件上传的技术，并且将两者结合起来完成了PC扫码上传功能的实现。对于开发人员来说，这种更为便捷和高效的上传方式会成为开发中的一个热门话题和需求。

以上是pc扫码上传 php实现的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn