ドラッグアンドドロップでファイルアップロード【jQuery・PHP】

JavaScript

2023.08.202023.10.15

チャット系のウェブサービスによくあるのが、ドラッグアンドドロップによるファイル添付です。

今回はそのような機能の実装方法について解説します。

ドラッグアンドドロップでファイルを表示する
1. デモ
2. コード解説
送信ボタンクリックでファイルをアップロードする
1. js
2. PHP

ドラッグアンドドロップでファイルを表示する

デモ

背景がピンクの箇所にローカルの画像をドラッグアンドドロップすると、下部にそのファイルが表示できます。

※送信ボタンは稼働しません

See the Pen Untitled by masahiro nomura (@masahiroview) on CodePen.

コード解説

js(jQuery)のコード解説

//後でファイルをサーバにアップロードするために、配列にファイルを保持しておく
const uploadFilesArray = [];

//デフォルトのドラッグオーバーの挙動（別タブで開く）を停止する。
$('.drag-zone').on('dragover', function(e) {
   e.preventDefault();
});

//マウスを離した際に画像ファイルを描画する
$('.drag-zone').on('drop', function(e) {
  e.preventDefault();
  
  const files = e.originalEvent.dataTransfer.files; 
  const reader = new FileReader();
  
  //ドラッグドロップしたファイルを描画する。
  reader.onload = (event) => {
    const result = event.target.result;
    $('.image-wrapper').append(
      '<div class="attach-file">' +
      '<img class="add-image" src="' + result + '">' +
      '</div>'
    );

    //アップロードファイル一覧に追加
    uploadFilesArray.push(files[0]);
  };
  reader.readAsDataURL(files[0]);
});

各コードの内容についてはコメントをご参照ください。

2行目の変数、uploadFilesArrayはファイルをアップロードするための配列です。

次の項目でこの変数を利用します。

送信ボタンクリックでファイルをアップロードする

js

$('button').on('click', function(e) {
     var fd = new FormData();
     //for文で画像を全てFormDataに追加する
     for(i=0;i<uploadFilesArray.length;i++){
        fd.append("image"+i, uploadFilesArray[i]);
     }
     //ファイル数を保持しておく
     fd.append("upFileLength",uploadFilesArray.length);

   $.ajax({
      url:'sample.php',
      type: 'post',
      data: fd,
      processData: false,
      contentType: false,
    }).then(function (data) {
       console.log(data);
    }).fail(function (error) {
       console.log(error);
 })
});

PHP

//sample.php
<?php 
$upFileLength = h($this->request->getData("upFileLength"));
$extensions = [
  'image/gif' => 'gif',
  'image/jpeg' => 'jpg',
  'image/png' => 'png'
];
$success_flg = true;

for ($i = 0; $i < $upFileLength; $i++) {
    $image = $_POST["image" . $i]; 
    $finfo = finfo_open(FILEINFO_MIME_TYPE);
    $mime_type = finfo_buffer($finfo, $image);

    $file_path = "/PATH/image" . $i . "." . $extensions[$mime_type]; 
    if (!file_put_contents($file_path, $image)) {
        $success_flg = false;
    }

    if (!$success_flg) {
        break;
    }
}

if ($success_flg) {
    $data = json_encode(["status", "200"]);
    echo $data;
} else {
    $data = json_encode(["status", "500"]);
    echo $data;
}
?>