使用 javascript、PHP、MySQl 上传多张图片答案

【问题标题】：Multiple images upload using javascript, PHP, MySQl使用 javascript、PHP、MySQl 上传多张图片
【发布时间】：2019-02-26 15:23:53
【问题描述】：

我在这里进行混合 Android 应用转换。我的页面是 HTML 页面。我只需要使用 Javascript 上传多张图片。在我的页面中，我不能使用 PHP if(isset($_POST['submit'])) 函数，因为它是一个 HTML 页面。而且我不能使用<form action='upload.php' method='POST'>，因为它重定向到那个PHP页面。所以我不能在同一个页面。

<form method="POST" action="" id="proinsert" name="proinsert" enctype="multipart/form-data">
<input type="file" name="photo" id="photo" class="form-control"> 
<button id="submit" name="submit" class="btn btn-primary margintop">Submit</button>
</form>

还有我的 PHP 页面

foreach($_FILES['photos']['name'] as $file){ 
    $message .= "Attachments:" .$file['filename']; 
}

【问题讨论】：

标签： javascript php html

【解决方案1】：

您的问题非常广泛。不过，我会尽力回答：

您的问题有 3 个逻辑层：

创建用户界面的 HTML
Javascript - 处理您的图像（或任何文件）并将其发送到另一个地方。
您的 PHP 代码，它将接受您的图像并将其处理/保存到您的服务器。

简要概述如何解决该问题：

在 HTML 中构建一个带有文件上传字段的表单。

<form method="post" enctype="multipart/form-data">
    <input type="file" name="files[]" multiple>
    <input type="submit" value="Upload File" name="submit">
</form>

在您的 HTML 文件中，编写或包含将序列化表单数据的 Javascript，并将其发布到您的 PHP 文件。

<script type="text/javascript">
    const url = 'process.php';
    const form = document.querySelector('form');

    form.addEventListener('submit', e => {
        e.preventDefault();

        const files = document.querySelector('[type=file]').files;
        const formData = new FormData();

        for (let i = 0; i < files.length; i++) {
            let file = files[i];

            formData.append('files[]', file);
        }

        // Uses browser's built in Fetch API - you can replace this with jQuery or whatever you choose.
        fetch(url, {
            method: 'POST',
            body: formData
        }).then(response => {
            console.log(response);
        });
    });
</script>

将逻辑写入一个新的 PHP 文件（称为 process.php）以适当地处理表单数据（图像）。

<?php 

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if (isset($_FILES['files'])) {
        $errors = [];
        $path = 'uploads/';
        $extensions = ['jpg', 'jpeg', 'png', 'gif'];

        $all_files = count($_FILES['files']['tmp_name']);

        $fileNames = [];
        for ($i = 0; $i < $all_files; $i++) {  
            $file_name = $_FILES['files']['name'][$i];
            $file_tmp = $_FILES['files']['tmp_name'][$i];
            $file_type = $_FILES['files']['type'][$i];
            $file_size = $_FILES['files']['size'][$i];
            $file_ext = strtolower(end(explode('.', $_FILES['files']['name'][$i])));
            $fileNames[] = $file_name;

            $file = $path . $file_name;

            if (!in_array($file_ext, $extensions)) {
                $errors[] = 'Extension not allowed: ' . $file_name . ' ' . $file_type;
            }

            if ($file_size > 2097152) {
                $errors[] = 'File size exceeds limit: ' . $file_name . ' ' . $file_type;
            }

            if (empty($errors)) {
                move_uploaded_file($file_tmp, $file);
            }
        }

        if ($errors) {
            print_r($errors);
        } else {
            print_r(json_encode(['file_names' => $fileNames]));
        }
    }
}

为了速度 - 此解决方案中的示例代码取自 https://www.taniarascia.com/how-to-upload-files-to-a-server-with-plain-javascript-and-php/

对于其他示例 - 您可以查看 StackOverflow 的其他问题。这是一个和你类似的：uploading image using javascript

【讨论】：

Awesome Awesome......在这里我只有一个疑问......如何通过alert获取上传的文件名???????????
见上面的代码 - $file_name = $_FILES['files']['name'][$i];
查看更新示例 - PHP 脚本的响应现在将包含上传的文件名数组。您可以像这样从 Javascript 访问它： .then(response => { console.log(response.file_names) })
fetch(url, { method: 'POST', body: formData }).then(response => { console.log(response.file_names) });像这样我给..但没有输出
对不起-我的错误。只做 console.log(response) 看看有什么。 file_names 可以嵌套在另一个属性下。所以它可能类似于 console.log(response.data.file_names)