Ajaxの非同期通信で画像をアップロードしたい。

Question

phpとJS(Ajax)を用いてチャットアプリの作成をしています。
ネットに転がっているものを参考にしつつ作成をしています。

メッセージは反映され、表示できるのですが、
画像を送信する機能を作成していたところ、$_filesがからのまま渡っていてDBに送信できません。
どのようにすれば値が渡るか教えて欲しいです。
Ajaxのコードとformのコードを以下に貼ります。
enctype="multipart/form-data"は指定済みです。

<form action="#" class="img_send" method="POST" enctype="multipart/form-data">
                <input type="text" name="outgoing_msg_id" value="省いています" hidden>
                <input type="text" name="incoming_msg_id" value="省いています" hidden>
               　　<input type="file" name="msg_img" id="filesend">
                
                <button type="button"><i class="fas fa-upload"></i></button>
          </form>

const form = document.querySelector(".img_send"),
inputField = form.querySelector("input-field"),
sendBtn = form.querySelector("button");

sendBtn.onclick = ()=>{
    let xhr = new XMLHttpRequest();
    xhr.open("POST","insert-img-chat.php", true);
    xhr.onload = ()=>{
      if(xhr.readyState === XMLHttpRequest.DONE){
          if(xhr.status === 200){
              inputField3.value = "";
              scrollToBottom();
          }
      }
    }
    let formData = new FormData(form);
    xhr.send(formData);
}

insert-img-chat.php↓

<?php
session_start();


if(isset($_SESSION['user_unique_id'])){
    require_once(ROOT_PATH .'Controllers/UserController.php');
    $user = new UserController();
    $user->InsertMsgImg();
    
}



?>

insert-img-chat.phpにおける$user->InsertMsgImg()の処理部分が以下です。

public function InsertMsgImg(){
        $users = $this->PrivateChatRoom->insert_msg_img();
        return $users;
    }

public function insert_msg_img(){
                if(isset($_POST['outgoing_msg_id'])){
                $outgoing_msg_id = $_POST['outgoing_msg_id'];
                }
                if(isset($_POST['incoming_msg_id'])){
                $incoming_msg_id = $_POST['incoming_msg_id'];
                }
                //画像送信
                if($_FILES['msg_img']){
                    $msg_img_name      = $_FILES['msg_img']['name'];
                    $msg_img_type      = $_FILES['msg_img']['type'];
                    $msg_img_tmp_name  = $_FILES['msg_img']['tmp_name'];
                
                    $msg_img_explode = explode('.',$msg_img_name);
                    $msg_img_txt     = end($msg_img_explode);
                    $extensions       = ["png","jpag","jpg"];
                
                    if(in_array($msg_img_txt,$extensions) === true){
                    $time = time();
                    $new_img_name = $time.$msg_img_name;
                    if(move_uploaded_file($msg_img_tmp_name,"img/".$new_img_name)){
                        $msg_img = $new_img_name;
                
                    }
                    }
                }
                
        
                if(!empty($msg_img)){
                    $sql = "INSERT INTO $this->table(outgoing_msg_id,incoming_msg_id,msg_img)
                    VALUES(:outgoing_msg_id,:incoming_msg_id,:msg_img)";
                    $sth = $this->dbh->prepare($sql);
                }
    
                
                $this->dbh->beginTransaction();
                try {
                    $sth = $this->dbh->prepare($sql);
                    $sth->bindParam(':outgoing_msg_id', $outgoing_msg_id, PDO::PARAM_INT);
                    $sth->bindParam(':incoming_msg_id', $incoming_msg_id, PDO::PARAM_INT);
                    $sth->bindParam(':msg_img', $msg_img, PDO::PARAM_STR);
                    
                    $result = $sth->execute();
                    $this->dbh->commit();
                        return $result;
                } catch (\PDOException $e) {
                    echo '更新失敗'.$e->getMessage();
                    $this->dbh->rollBack();
                    exit();
                }
            }

insert-img-chat.phpに遷移はデバックでできています。
insert-img-chat.php内でのSQL実行に際に$_filesの値が取得できません。

よろしくお願いいたします。

Comments

[KAOsaka]

PHPのソースは記載できますか？

[alyssa703957]

MVCで作成しているためコードを複数追加しました。
よろしくお願いいたします！！

Answer 1

擬似的に再現したコードで実行してみましたが、$_FILESの値は問題なく取得できています。

提示いただいているコード以外の部分に問題があるかと思われます。

ブラウザの開発ツールでファイルが送信されてるか確認していただいて、

送信されているようであればphpのエラーログを確認していただくのが良いかと思います。

擬似的に再現したコード

index.php

<form action="#" class="img_send" method="POST" enctype="multipart/form-data">
  <input type="file" name="msg_img" id="filesend">

  <button type="button">Upload</button>
</form>

<script>
const form = document.querySelector(".img_send");
const sendBtn = form.querySelector("button");

sendBtn.onclick = () => {
  let xhr = new XMLHttpRequest();

  xhr.open("POST", "insert-img-chat.php", true);

  xhr.onload = () => {
    console.log(xhr.responseText);
  }

  let formData = new FormData(form);

  xhr.send(formData);
}
</script>

insert-img-chat.php

<?php
session_start();

class PrivateChatRoom {
  public function insert_msg_img() {
    return $_FILES['msg_img'];
  }
}

class UserController {
  public function __construct() {
    $this->PrivateChatRoom = new PrivateChatRoom();
  }

  public function InsertMsgImg() {
    $users = $this->PrivateChatRoom->insert_msg_img();

    return $users;
  }
}

if (true) {
  $user = new UserController();

  $users = $user->InsertMsgImg();

  echo json_encode($users);
}

HTTP Resonse

{
  "name":"1.jpg",
  "type":"image/jpeg",
  "tmp_name":"/tmp/phpGUgzMx",
  "error":0,
  "size":83122
}

Comments

[alyssa703957]

ありがとうございます！解決できました！
Ajaxの中のコードにみすがありました！

Answer 2

非同期でファイルを転送するならfetchをformdataで送るのが楽です

<script>
window.addEventListener('DOMContentLoaded',()=>{
  document.querySelector('#btn').addEventListener('click',e=>{
    const url="test.php";
    const body=new FormData(e.target.form);
    const method="post";
    fetch(url,{body,method}).then(res=>res.text()).then(console.log);
  });
});

</script>
<form action="#" class="img_send" method="POST" enctype="multipart/form-data">
<input type="file" name="msg_img" id="filesend">
<button type="button" id="btn">send</button>
</form>

//test.php

<?PHP
print_r($_FILES);

Comments

[alyssa703957]

ありがとうございます！
参考にさせていただきました！