时间戳

首页 > 解决方案 > 使用ajax上传多个文件

javascript - 使用ajax上传多个文件

问题描述

嗨，我有一个模式来上传多个图像，如下所示，并且想上传图像并返回错误消息或成功消息。问题是我似乎无法处理所有图像。我在 javascript 中创建了一个表单数据，我在其中附加了所有文件，但从 php 中我似乎无法处理所有这些文件。知道为什么吗？ 

<!-- Modal -->
<div class="modal fade" id="uploadImages" role="dialog">
    <div class="modal-dialog modal-lg">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Upload Scanned Images</h4>
            </div>
            <div class="modal-body" id="body">
                <form method="POST" enctype="multipart/form-data">
                    Select file : <input type='file' name='file[]' id='file' class='form-control' multiple=""><br>
                    <input type='submit' class="btn btn-info" value="Upload File" id='but_upload' name='submit'>
                </form>
                <script src="uploadImages.js"></script>
            </div>
            <div class="modal-footer">
                <p>Only jpeg, png, bmp and tiff Images are allowed to be uploaded</p>
            </div>
        </div>
    </div>
</div>

我也有一个 javascript 来发送一个 ajax 帖子：

$(document).ready(function () {

    $("#but_upload").click(function () {
        var filedata = $('#file')[0];
        var formdata = false;
        if (window.FormData) {
            formdata = new FormData();
        }

        var i = 0,
            len = filedata.files.length,
            img, reader, file;
        for (i = 0; i < len; i++) {
            file = filedata.files[i];
            if (formdata) {
                formdata.append("file", file);
            }
        }

        $.ajax({
            url: 'uploadImages3.php',
            type: 'post',
            data: formdata,
            contentType: false,
            processData: false,
            success: function (response) {
                alert(response);
            },
        });
    });
});

这是我的 php 文件

<?php

/* Getting file name */

$filename = $_FILES['file']['name'];

/* Location */
$location = "SavedImages/" . $filename;

$uploadOk = "No Errors";
$imageFileType = pathinfo($location, PATHINFO_EXTENSION);

$extensions = ['jpg', 'jpeg', 'png', 'gif', 'tiff'];

$all_files = count($_FILES['file']['name']);

for ($i = 0; $i < $all_files; $i++) {

  $file_name = $_FILES['file']['name'][$i];
  $file_tmp = $_FILES['file']['tmp_name'][$i];
  $file_type = $_FILES['file']['type'][$i];
  $file_size = $_FILES['file']['size'][$i];
  $file_ext = strtolower(end(explode('.', $_FILES['file']['name'][$i])));
  $file = $path . $file_name;
  if (!in_array($file_ext, $extensions)) {
    $uploadOk = $uploadOk . 'Extension not allowed: ' . $file_name . ' ' . $file_type;
  }

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

  if (file_exists($file)) {
    $uploadOk = $uploadOk . 'File already exists: ' . $file_name . ' ' . $file_type;
  }


  if ($uploadOk != "No Errors") {
    echo  $uploadOk;
  } else {
    /* Upload file */
    if (move_uploaded_file($_FILES['file']['tmp_name'], $location)) {

      echo "File saved";
    } else {

      echo $uploadOk;
    }
  }
}

标签： javascriptphp

解决方案

你有：

formdata.append("file", file);

使用 PHP 时，如果您有多个具有相同名称的表单字段，则该名称必须以该名称结尾，[]否则只有其中一个可用。

不过，在 JS 中手动循环文件是毫无意义的。

  1. 将事件处理程序绑定到表单的提交事件
  2. 使用表单填充 FormData 对象

您还需要防止默认行为 - 在单击提交按钮时正在运行 JS，但正常的表单提交将继续并加载新页面（在运行时终止 JS 程序）。

这样的：

$("form").on("submit", function(e) {
    e.preventDefault();
    var formdata = new FormData(this);
    $.ajax({
        url: 'uploadImages3.php',
        type: 'post',
        data: formdata,
        contentType: false,
        processData: false,
        success: function(response) {
            alert(response);
        },
    });
});

然后你的 PHP 将有一个文件数组，每个文件都有名称等。它不会有一个文件，包含一个名称数组等。

$_FILES['file']['name'][$i];应该是$_FILES['file'][$i]['name'];，你的计数方法也是错误的。

不过，使用 foreach 循环更容易：

foreach ($_FILES['file'] as $file) {
    $file_name = $file['name'];
    # etc
}

推荐阅读