概要
ファイルのアップロードについて説明します。アップロードとは、ブラウザでファイルをドラック＆ドロップして、サーバーの指定した場所にファイルを置くする処理です。
ファイルは、以下の2つのみです。
- download.html
- upload.php
クライアント
以下の内容です。
- CSSはhtmlの中に定義しています。
- ajaxのurl: ‘https://hogehoge.jp/3D/upload.php’は適時変更ください。
- 50M以上のファイルはアップロードできないようになっています。
- <input type=”file” accept=”image/*”> ～<input type=”file” accept=”image/png,image/jpeg,image/gif”> はコメントアウトしていますが、拡張子で制限を付けることもできます。
<html>
<head>
<meta charset="utf-8"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>ダウンロードサイト</title>
<style type="text/css">
<!--
#inputFile {
position: relative;
padding: 180px 0 100px;
text-align: center;
}
#dropArea {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 100px 0 0;
border: 2px dashed #494949;
background: rgba(22, 165, 191, 0);
transition: all 0.25s cubic-bezier(0.21, 0.51, 0.51, 1);
}
#dropArea.dragover {
border: 2px solid #16a5bf;
background: rgba(22, 165, 191, 0.6);
}
#uploadFile {
position: absolute;
top: 0;
left: 0;
z-index: 10;
display: block;
width: 300px;
height: 80px;
opacity: 0;
}
#inputFileWrap {
position: relative;
display: inline-block;
}
#btnInputFile,
#btnChangeFile {
display: table;
width: 300px;
}
#btnChangeFile {
display: none;
}
#btnInputFile span,
#btnChangeFile span {
position: relative;
z-index: 2;
display: table-cell;
width: 300px;
height: 80px;
border: 1px solid #333;
border-radius: 4px;
background: #333;
text-decoration: none;
color: #fff;
font-size: 26px;
line-height: 1;
font-weight: bold;
vertical-align: middle;
}
#upFileWrap.selected #btnInputFile {
display: none;
}
#upFileWrap.selected #btnChangeFile {
display: table;
}
-->
</style>
</head>
<body>
<div id="upFileWrap">
<div id="inputFile">
<!-- ドラッグ&ドロップエリア -->
<p id="dropArea">ここにファイルをドロップしてください.<br>または</p>
<!-- 通常のinput[type=file] -->
<div id="inputFileWrap">
<input type="file" name="uploadFile" id="uploadFile">
<div id="btnInputFile"><span>ファイルを選択する</span></div>
<div id="btnChangeFile"><span>ファイルを変更する</span></div>
</div>
</div>
</div>
<!---
<input type="file" accept="image/*">
<input type="file" accept="video/*">
<input type="file" accept="audio/*">
<input type="file" accept="image/png,image/jpeg,image/gif">
--->
<script type="text/javascript">
// ドラッグ&ドロップエリアの取得
var fileArea = document.getElementById('dropArea');
// input[type=file]の取得
var fileInput = document.getElementById('uploadFile');
// ドラッグオーバー時の処理
fileArea.addEventListener('dragover', function (e) {
e.preventDefault();
fileArea.classList.add('dragover');
});
// ドラッグアウト時の処理
fileArea.addEventListener('dragleave', function (e) {
e.preventDefault();
fileArea.classList.remove('dragover');
});
// ドロップ時の処理
fileArea.addEventListener('drop', function (e) {
e.preventDefault();
fileArea.classList.remove('dragover');
// ドロップしたファイルの取得
var files = e.dataTransfer.files;
// 取得したファイルをinput[type=file]へ
fileInput.files = files;
if (typeof files[0] !== 'undefined') {
//ファイルが正常に受け取れた際の処理
//50MB以下の場合
if(files[0].size < 52428800)
{
ajax_upload(files[0]);
}else
{
alert("アップロードエラー。50MB以下のデータで、ご使用ください。");
}
} else {
//ファイルが受け取れなかった際の処理
alert("アップロードエラー。");
}
});
// input[type=file]に変更があれば実行
// もちろんドロップ以外でも発火します
fileInput.addEventListener('change', function (e) {
var file = e.target.files[0];
if (typeof e.target.files[0] !== 'undefined') {
// ファイルが正常に受け取れた際の処理
//50MB以下の場合
if(file.size < 52428800)
{
ajax_upload(file);
}else
{
alert("アップロードエラー。50MB以下のデータで、ご使用ください。");
}
} else {
// ファイルが受け取れなかった際の処理
alert("アップロードエラー。");
}
}, false);
function ajax_upload(file) {
let fd = new FormData();
fd.append("file", file);
let options = {
type: 'POST',
url: 'https://hogehoge.jp/3D/upload.php',
data: fd,
cache: false,
contentType: false,
processData: false,
dataType: 'json'
};
$.ajax(
options
).done(function (d) {
//json返ってきたので処理
//通信成功時の処理
}).fail(function (d) {
//通信失敗時の処理
}).always(function () {
//通信完了時の処理
});
}
</script>
</body>
</html>サーバー
- header(“Access-Control-Allow-Origin: *”)は、エラーを回避するための処理です。
<?php>
//アップロードされたファイル名を取得
$filename = $_FILES['file']['name'];
//ファイルサイズ取得
$filesize = $_FILES['file']['size'];
//アップロード場所
$location = "data/".$filename;
//jsonで返す配列
$return_arr = array();
//uploadディレクトリにファイルをアップロード
if(move_uploaded_file($_FILES['file']['tmp_name'],$location))
{
$return_arr = array("name" =>$filename,"size" =>$filesize, "src"=>$src);
}else
{
//echo 'アップロードされたファイルの保存に失敗しました。';
}
/// Access-Control-Allow-Originエラーを回避する
header("Access-Control-Allow-Origin: *");
//最後はjsonで返す(ajaxでjson指定しているので)
echo json_encode($return_arr);
upload.php (END)
使用したファイル
使用したファイルを掲載しておきます。
