Question

在这里，我正在进行Hybrid 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']; 
}

Answer 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

使用javascript，PHP，MySQl上传多张图片

1 个答案: