ライブラリ等を使用せずファイルをドラッグ&ドロップでアップロードする方法
formにドラッグ&ドロップでファイルをアップロードする機能を実装する場合、Dropzone.jsを使用する方法を以前にメモした。ただそのメモは10年近く前のものなのでもっと良い方法があるんじゃないかと調べたところライブラリを使用せず実装できる方法があった。以下に実装方法をメモ。
やりたいこと
以下を実装したい。
- フォームにinput="file"を用意し、そちらをドラッグ&ドロップでファイル選択できるようにしたい
- ドラッグ&ドロップエリアをクリックすると通常のinput="file"と同様、ファイルを選択できるようにしたい
- ファイル選択時は視覚的に分かりやすいようプレビュー表示させたい
準備
ファイルのアップロード処理はclass.upload.phpを使いたいので過去記事を参照の上、インストールしておく。
ソースコード
フォーム側(index.php)
<html lang="ja">
<head>
<meta charset="utf-8">
</head>
<style>
#drop_zone {
border: 5px solid blue;
width: 200px;
height: 100px;
}
#drop_zone input {
display: block;
opacity: 0;
}
</style>
<body>
<form action="upload.php" method="post" enctype="multipart/form-data">
<div id="preview"></div>
<div id="drop_zone">
ファイルをドラッグ&ドロップで選択してください。
<input type="file" name="file" id="file">
</div>
<input type="submit" name="submit" value="送信">
</form>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(function(){
$(`#file`).on('change', function(){
//画像取得
const file = $(this).prop('files')[0];
const type = file.type;
//画像かどうかチェック
if( !type.match(/^image/) ){
alert('画像を選択してください');
$(this).val('');
return false;
}
//FileReaderオブジェクトのインスタンス化
let reader = new FileReader();
//画像の読み込み
reader.readAsDataURL(file);
//読み込み失敗時
reader.onerror = function(){
alert('ファイル読み取りに失敗しました');
$(this).val('');
return false;
}
//画像を表示
reader.onload = function() {
$(`#preview`).html(`<img src="${reader.result}" style="width:100px;">`)
}
});
});
</script>
</body>
</html>
アップロード側(upload.php)
<?php
require_once 'class.upload.php';
$file = $_FILES['file'];
$lang = 'ja_JP';
$handle = new \Verot\Upload\Upload($file, $lang);
if( $handle->uploaded ){
//ファイル名の変更
$handle->file_new_name_body = date('YmdHis');
//同一ファイル名の場合は上書き
$handle->file_overwrite = true;
//アスペクト比はそのままで横幅を300pxにリサイズ
$handle->image_resize = true;
$handle->image_x = 300;
$handle->image_ratio = true;
$handle->image_convert = 'webp';
//アップロードするディレクトリ指定
$handle->process('./file/');
if( $handle->processed ){
//成功処理
echo 'success';
}else{
//エラー処理
echo $handle->error;
}
}else{
//エラー処理
echo $handle->error;
}
解説
初めて知ったんだけどinput="file"自体がドラッグ&ドロップ可能みたい。そのためドラッグ&ドロップもしくは通常のファイル選択後「$(`#file`).on('change', function(){」にてサムネイルを表示するという形になっている。
サムネイル表示に関して詳しくは過去記事参照。
所感
今回の方法以外にもHTML Drag and Drop APIというHTMLのWeb APIがあるらしいので後日試してみたいところ。
参考サイト
関連記事
-
-
画像アップロード前の時点で画像が選択されているか確認
やりたかった事は、フォーム内で画像をアップロードする際、 ちゃんと画像がローカル ...
-
-
jQueryで画像(
タグ内)のsrc情報を取得する場合
すぐに出てこなかったのでメモ。 $('#test').attr('src'); ...
-
-
「slick」でブラウザ幅がPCの場合はスライダーを表示し、スマホ幅の場合はスライダー無しにする方法
slickプラグインで画像スライダーを設置しているページがあり、PCのブラウザ幅 ...
-
-
Lightboxで画像拡大時にダウンロードリンクを設置する方法
Lightboxで画像拡大時にダウンロードリンクを設置したいと要望を受けた。もち ...
-
-
jquery.snipeの使い方
使い方によっては面白くなりそう。 ■jquery.snipe http://ra ...