jQueryで、複数(三つ)の画像ファイルを選択しリサイズした後、PHPでサーバーにアップロード(指定のディレクトリー"./images/"に保存)したいのですが、
後述のスクリプトでは、最後に選択したファイルだけしか、リサイズ・保存されません。
クロームのデベロッパーツールで確認するとBlobは、複数確認できているので、
アップロード開始ボタン(投稿)をクリックした後の jQuery('#upload').click(function()内で、
ループ配列化して、phpに送ればよいのでは、色々と試してみたのですが、jQuery javascript php等々、プログラム全般について初心者のため、
うまく配列化できません。
配列での送受信あるいは、別の方法での複数画像ファイルのリサイズアップロードのやり方について、ご教授頂けないでしょうか。
なお、複数ファイル選択で、下のように
<input type="file" name="file1" id="idtmp1" accept="image/*">
「multiple」を使っていないのは、サーバー側で値を出力する際、順位を特定したいからです。
よろしくお願いいたします。
HTML+ javascript部分
[index.html]
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div>
<form enctype="multipart/form-data" method="post">
<table align="center">
<tr>
<td align="center">
<input type="file" name="upfile[]" id="idtmp1" accept="image/*"><br><canvas id="canvas1" width="0" height="0"></canvas><br>
<input type="file" name="upfile[]" id="idtmp2" accept="image/*"><br><canvas id="canvas2" width="0" height="0"></canvas><br>
<input type="file" name="upfile[]" id="idtmp3" accept="image/*"><br><canvas id="canvas3" width="0" height="0"></canvas><br>
</td>
</tr>
</table>
<table align="center">
<tr>
<td align="center">
<!-- アップロード開始ボタン -->
<button class="btn btn-primary" id="upload">投稿</button>
<button type=reset class="gryBtn100">Reset</button>
</td>
</tr>
</table>
</form>
</div>
<script type="text/javascript">
// 縮小後 アップロード
jQuery(function() {
var file = null; // 選択されるファイル
var blob = null; // 画像(BLOBデータ)
const THUMBNAIL_WIDTH = 500; // 画像リサイズ後の横の長さの最大値
const THUMBNAIL_HEIGHT = 500; // 画像リサイズ後の縦の長さの最大値
// ファイルが選択されたら
jQuery('input[type=file]').change(function() {
// サムネ描画位置指定のためid名から番号取得
var idName = jQuery(this).attr("id");
var n = idName.slice( -1 ) ;
// ファイルを取得
file = jQuery(this).prop('files')[0];
// 選択されたファイルが画像かどうか判定
if (file.type != 'image/jpeg' && file.type != 'image/jpg' && file.type != 'image/gif' && file.type != 'image/png') {
alert("Only the following file types can be uploaded:JPG, JPEG, PNG, GIF");
file = null;
blob = null;
// 選択されたファイルをクリア
jQuery('input[type=file]').val('');
return;
}
// 選択されたファイルが制限サイズ内かどうか判定
if((1200 * 1024)< file.size){
alert("ファイル容量を超えています");
file = null;
blob = null;
// 選択されたファイルをクリア
jQuery('input[type=file]').val('');
return;
}
// 画像をリサイズする
var image = new Image();
var reader = new FileReader();
reader.onload = function(e) {
image.onload = function() {
var width, height;
if(image.width > image.height){
// 横長の画像は横のサイズを指定値にあわせる
var ratio = image.height/image.width;
width = THUMBNAIL_WIDTH;
height = THUMBNAIL_WIDTH * ratio;
} else {
// 縦長の画像は縦のサイズを指定値にあわせる
var ratio = image.width/image.height;
width = THUMBNAIL_HEIGHT * ratio;
height = THUMBNAIL_HEIGHT;
}
// サムネ描画位置取得
var canvas_n = '#canvas' + n;
// サムネ描画用canvasのサイズを上で算出した値に変更
var canvas = jQuery(canvas_n)
.attr('width', width)
.attr('height', height);
var ctx = canvas[0].getContext('2d');
// canvasに既に描画されている画像をクリア
ctx.clearRect(0,0,width,height);
// canvasにサムネイルを描画
ctx.drawImage(image,0,0,image.width,image.height,0,0,width,height);
// canvasからbase64画像データを取得
var base64 = canvas.get(0).toDataURL('image/jpeg');
// base64からBlobデータを作成
var barr, bin, i, len;
bin = atob(base64.split('base64,')[1]);
len = bin.length;
barr = new Uint8Array(len);
i = 0;
while (i < len) {
barr[i] = bin.charCodeAt(i);
i++;
}
blob = new Blob([barr], {type: 'image/jpeg'});
console.log(blob);
}
image.src = e.target.result;
}
reader.readAsDataURL(file);
});
// アップロード開始ボタンがクリックされたら
jQuery('#upload').click(function(){
// ファイルが指定されていなければ何も起こらない
if(!file || !blob) {
return;
}
var name, fd = new FormData();
fd.append('file', blob); // ファイルを添付する
jQuery.ajax({
url: 'upload.php', // 送信先
type: 'POST',
dataType: 'html',
data: fd,
processData: false,
contentType: false
})
.done(function( data, textStatus, jqXHR ) {
// 送信成功
alert(data);
location.href = "./"; // ページリロード
})
.fail(function( jqXHR, textStatus, errorThrown ) {
// 送信失敗
alert('ERROR : ' + status + ' : ' + errorThrown);
});
});
});
</script>
</body>
</html>
PHP部分
[upload.php]
<?php
/* 拡張子情報の取得・セット */
$imginfo = getimagesize($_FILES['file']['tmp_name']);
if($imginfo['mime'] == 'image/jpeg'){ $extension = ".jpg"; }
if($imginfo['mime'] == 'image/png'){ $extension = ".png"; }
if($imginfo['mime'] == 'image/gif'){ $extension = ".gif"; }
/* 拡張子存在チェック */
if(!empty($extension)){
/* 画像登録処理 */
$file_tmp = $_FILES['file']['tmp_name'];
$file_name = "sample" . $extension; // アップロード時のファイル名を設定
$file_save = "./images/" . $file_name; // アップロード対象のディレクトリを指定
move_uploaded_file($file_tmp, $file_save); // アップロード処理
echo "success"; // jquery側にレスポンス
} else {
echo "fail"; // jquery側にレスポンス
}
?>
Q&A
ベストアンサー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/11/09 07:48
2020/11/09 13:46
2020/11/09 13:46
2020/11/09 21:04