关于javascript:原生JavaScriptPHP多图上传实现

很多场景下须要抉择多张图片上传，或者是批量上传以提高效率，多图上传的需要天然就比拟多了，本文应用最简略的 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);
?>

TANKING

关于javascript:原生JavaScriptPHP多图上传实现

摘要

界面

上传示例

代码

作者