php技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > PHP编程 > php技巧 > JavaScript PHP多图上传

原生JavaScript+PHP多图上传实现示例

作者:TANKING

这篇文章主要为大家介绍了原生JavaScript+PHP多图上传实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

摘要

很多场景下需要选择多张图片上传,或者是批量上传以提高效率,多图上传的需求自然就比较多了,本文使用最简单的XMLHttpRequest异步上传图片。

界面

上传示例

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>多图上传</title>
        <meta charset="utf-8">
        <style>
            #fileInput{
                width: 500px;
                height: 45px;
                margin: 50px auto 0;
                background: #eee;
                display: block;
                padding: 20px 20px;
                border-radius: 20px;
            }
            #previewContainer{
                width: 500px;
                margin: 10px auto;
                background: #eee;
                padding: 20px 20px;
                display: none;
            }
            .preview-image {
              max-width: 200px;
              max-height: 200px;
              margin-bottom: 10px;
            }
        </style>
    </head>
    <body>
        <!--选择文件-->
        <input type="file" id="fileInput" accept="image/*" multiple>
        <div id="previewContainer"></div>
        <script>
            const fileInput = document.getElementById('fileInput');
            const previewContainer = document.getElementById('previewContainer');
            // 监听选择文件
            fileInput.addEventListener('change', handleFileSelect);
            function handleFileSelect(event) {
                const files = event.target.files;
                for (let i = 0; i < files.length; i++) {
                    const file = files[i];
                    const reader = new FileReader();
                    reader.onload = function(event) {
                        const image = document.createElement('img');
                        image.className = 'preview-image';
                        image.src = event.target.result;
                        previewContainer.appendChild(image);
                        // 将文件上传至服务器
                        uploadImage(file);
                    }
                    reader.readAsDataURL(file);
                }
            }
            // 将文件上传至服务器
            function uploadImage(file) {
                const xhr = new XMLHttpRequest();
                const formData = new FormData();
                // 将文件添加到formData对象
                formData.append('image', file);
                // 设置XHR请求的处理函数
                xhr.onreadystatechange = function() {
                    if (xhr.readyState === XMLHttpRequest.DONE) {
                        if (xhr.status === 200) {
                            console.log('上传成功');
                            // 显示图片预览区域
                            document.querySelector('#previewContainer').setAttribute('style', 'display:block');
                            // 打印JSON
                            console.log(JSON.parse(xhr.response))
                        } else {
                            console.log('上传失败');
                        }
                    }
                }
                // 发送POST请求到服务器
                xhr.open('POST', 'upload.php', true);
                xhr.send(formData);
            }
        </script>
    </body>
</html>

upload.php

(请建立一个upload文件夹以存放上传的文件)

<?php
    // 编码
    header("Content-type:application/json");
    // 检查是否有文件上传
    if (isset($_FILES['image'])) {
        // 获取上传的文件信息
        $file = $_FILES['image'];
        // 获取文件名
        $fileName = $file['name'];
        // 获取文件的临时路径
        $tmpFilePath = $file['tmp_name'];
        // 指定保存目录
        $uploadDir = 'upload/';
        // 验证是否为图片文件
        if ((($_FILES["image"]["type"] == "image/gif")
        || ($_FILES["image"]["type"] == "image/jpeg")
        || ($_FILES["image"]["type"] == "image/jpg")
        || ($_FILES["image"]["type"] == "image/pjpeg")
        || ($_FILES["image"]["type"] == "image/x-png")
        || ($_FILES["image"]["type"] == "image/png"))
        && ($_FILES["image"]["size"] < 10485760)){
            // 生成唯一的文件名
            $uniqueFileName = uniqid() . '_' . $fileName;
            // 拼接保存路径
            $uploadPath = $uploadDir . $uniqueFileName;
            // 获取HTTP协议
            function get_http_type(){
                $http_type = ((isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] == 'on') || (isset($_SERVER['HTTP_X_FORWARDED_PROTO']) && $_SERVER['HTTP_X_FORWARDED_PROTO'] == 'https')) ? 'https://' : 'http://';
                return $http_type;
            }
            // 将临时文件移动到目标路径
            if (move_uploaded_file($tmpFilePath, $uploadPath)) {
                    // 上传成功
                    // 可以在此处进行进一步处理,比如生成缩略图、添加水印等
                    $result = array(
                        'code' => 200,
                        'msg' => '上传成功',
                        'url' => get_http_type().dirname($_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF']).'/'.$uploadPath
                    );
            } else {
                    // 上传失败
                    $result = array(
                        'code' => 202,
                        'msg' => '文件上传失败'
                    );
            }
        }else{
            // 不合规的文件
            $result = array(
                'code' => 202,
                'msg' => '不合规的文件'
            );
        }
    } else {
        // 没有文件上传
        $result = array(
            'code' => 202,
            'msg' => '没有选择要上传的文件'
        );
    }
    // JSON
    echo json_encode($result, JSON_UNESCAPED_UNICODE);
?>

以上就是原生JavaScript+PHP多图上传实现示例的详细内容,更多关于原生JavaScript PHP多图上传的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文