フォームで取得した画像を縮小しajaxでアップロード

Question

前提・実現したいこと

<input type="file">で選択した画像をcanvasに縮小してプレビュー、それをjavascriptでblobデータで送信、phpでアップロードしたいです。

発生している問題・エラーメッセージ

ajaxにて縮小ファイル送信、受け取り側のphpでアップロードはできるのですが、元のinputで選択した縮小前の画像も一緒にアップロードされてしまいます。

該当のソースコード

<!--new.php-->
<form method="POST" enctype="multipart/form-data" action="done.php">
<input type="file" name="image" accept="image/*">
<input id="send" type="submit" value="登録">
</form>

//new.php内に記述
$('#send').click(function(){
if(!file || !blob) { //fileは選択されるファイル、blobは<canvas>に描画された縮小済みのblobデータ
return;
}

var fd = new FormData();
fd.append("image", blob);
for(item of fd) console.log(item);
$.ajax({
url: 'done.php',
type: 'POST',
dataType: 'json',
data: fd,
processData: false,
contentType: false
})

.done(function( data, textStatus, jqXHR ) {

})
.fail(function( jqXHR, textStatus, errorThrown ) {

});

//done.php
<?php
header("Content-type: text/html; charset=utf-8");
$tmpName = $_FILES['image']['tmp_name'];
$mime = $_FILES['image']['type'];

if($mime == 'image/jpeg' || $mime == 'image/pjpeg'){
$ext = '.jpg';
$image1 = imagecreatefromjpeg($tmpName);
} elseif($mime == 'image/png' || $mime == 'image/x-png'){
$ext = '.png';
$image1 = imagecreatefrompng($tmpName);
} elseif($mime == 'image/gif'){
$ext = '.gif';
$image1 = imagecreatefromgif($tmpName);
} else {
return false;
}
$filename = sha1(microtime() . $_SERVER['REMOTE_ADDR'] . $tmpName) . $ext;
$dir = 'image/'; 
$uploadfile = $dir . $filename;
if ($_FILES['image']){
$uploadfile = $dir . $filename;
move_uploaded_file($_FILES['image']['tmp_name'],$uploadfile);
} 

試したこと

Javascriptのfd.append("image", blob);のimageを別名に変えるとアップロードはできてましたがNotice: Undefined index: image in ～ とエラーがでました。

補足情報

for(item of fd) console.log(item);のchromeでのコンソール表示↓

(2) ["image", File]
0: "image"
1: File {name: "blob", lastModified: 1583374717041, lastModifiedDate: Thu Mar 05 2020 11:18:37 GMT+0900 (日本標準時), webkitRelativePath: "", size: 5591, …}
length: 2
proto: Array(0)

Comments

[yambejp]

> <input type="file">で選択した画像をcanvasに縮小してプレビュー、それをjavascriptでblobデータで送信、phpでアップロードしたいです。

整理してください
・fileで選んだファイルをcanvasに流し込む？
・別にjpegやpngでプレビューすればいいのでは？
・blobデータで送信：ajaxないしfetchの処理？
・プレビューをなぜ送信するのでしょう？本データではまずい？
・blob送信はよいとして画像形式にコンバートしないとファイルにならないのでは？
・phpでアップロード：ちょっと表現が変。phpでうけて画像ファイルを保存するのですか？

[blacktm06]

初心者なものでちょっと理解できてない部分があると思います。

・fileで選んだファイルをcanvasに流し込む？
・別にjpegやpngでプレビューすればいいのでは？
→プレビュー自体は構わないです。

・blobデータで送信：ajaxないしfetchの処理？
→ajaxだと思います。

・プレビューをなぜ送信するのでしょう？本データではまずい？
→容量が大きいので。リサイズして容量を減らしたデータを送りたいです。

・blob送信はよいとして画像形式にコンバートしないとファイルにならないのでは？
アップロード自体は縮小されたものでされてました。

・phpでアップロード：ちょっと表現が変。phpでうけて画像ファイルを保存するのですか？
→理解できていないこともあるので表現が間違っているかもしれません。。
javascriptでdone.phpへ送信してdone.php内の move_uploaded_file で $_FILES を名前変えてアップロードするという理解でした。
consolでみると元データと縮小データ2つ送られてるっぽいです。

[blacktm06]

ちなみに下記サイトを参考にしました。

https://qiita.com/ma7ma7pipipi/items/1a1081b0dd71365a3e7e

Answer 1

formのsubmit止めてないようなのでdone.phpへの送信が2度起きてませんか？

Comments

[blacktm06]

onsubmit="location.href='done.php'; return false;"とかsubmitのonclickとかで送信を止めるのでしょうか。
やってみたら Notice: Undefined index: image in ～ のエラーがでます。。

[m.ts10806]

そりゃlocationでは送信しませんからそうなりますよ。
急にonsubmitが出てきたのはよくわかりませんけど、今のボタンのtypeをsubmitからbuttonに変更すると早いです。formのaction属性は不要ですね。非同期で処理しますし。

[blacktm06]

ファイル以外にもtype="text"やtype="radio"の値も送るとなると別の方法で送ることになりますか？
done.phpが登録完了画面として送られたテキストを表示させるとすれば。
done.phpに画面遷移はさせたいです。。

[m.ts10806]

シリアライズしてフォームデータ送ればどんな入力コントロールが幾つあっても関係ないですよ。
それに、done.phpとやらを非同期通信と画面表示両方に使ってはいけません。
どちらかのみにしてください。
非同期通信は画面表示や遷移を伴わないサーバーサイドプログラムの実行手法です。

[blacktm06]

ajaxでデータを送る先をdone.php、表示用をresult.phpと分ければ大丈夫でしょうか？
それとも非同期通信を使う際は画面遷移すること自体がいけない？？
非同期通信自体？？？な状態ではあり的外れなことかもしれませんがすみません。。
最終的にはフォームに入力したテキストや縮小した画像（アップロードしたパス）をデータベースに登録したいと思っています。
一度分けて試してみたのですが、done.phpの$uploadfileに格納されたパスを完了画面result.phpに渡す方法がわからなくて今に至ります。

[m.ts10806]

登録した後どうしたいか次第です。
画面遷移したあとに何かDBやセッションなどPHP通さないと取れない情報が必要かとか。
それも要件次第です。「完了しました」だけならJavaScriptで出せますし。

[blacktm06]

もともと考えていた内容としては、フォームにアイテム名などテキスト入力、画像を選択して登録ボタンを押すと完了画面（done.php）に遷移し$_POSTを受け取ってdone.php内のhtmlで登録内容の出力、画像はアップロード先のpathを返しimgタグで表示、DB登録といった内容にしたかったのです。画像がなかったらうまくいったのですが。。

[blacktm06]

シリアライズしてupload.phpに送信してmove_uploaded_fileでアップロード、その後done.phpのSELECT * FROM table ORDER BY id DESC LIMIT 1で引っ張ってくることにしました。
今の理解度では精いっぱいです。。
ありがとうございました！

Answer 2

こんな感じで

<form enctype="multipart/form-data" method="post">
<input type="file" name="userfile" accept="image/*">
</form>
<canvas id="canvas"></canvas>

Comments

[yambejp]

window.addEventListener('DOMContentLoaded', function(e){
document.querySelector('[type=file]').addEventListener('change',function(e){
var file = e.target.files[0];
var type=file.type;
var blob=new Blob([file],{type:type});
var url = window.URL || window.webkitURL;
var image = new Image();
var ratio,width,height;
image.src = url.createObjectURL(blob);
image.onload=function(e){
const THUMBNAIL_WIDTH = 100;
const THUMBNAIL_HEIGHT = 100;
if(image.width > image.height){
ratio = image.height/image.width;
width = THUMBNAIL_WIDTH;
height = parseInt(THUMBNAIL_WIDTH * ratio);
} else {
ratio = image.width/image.height;
width = parseInt(THUMBNAIL_HEIGHT * ratio);
height = THUMBNAIL_HEIGHT;
}
var canvas = document.querySelector('#canvas');
canvas.setAttribute('width', width);
canvas.setAttribute('height', height);
var ctx = canvas.getContext('2d');
ctx.clearRect(0,0,width,height);
ctx.drawImage(image,0,0,image.width,image.height,0,0,width,height);
var type = 'image/jpeg';
var dataurl = canvas.toDataURL(type);
var bin = atob(dataurl.split(',')[1]);
var buffer = new Uint8Array(bin.length);
for (var i = 0; i < bin.length; i++) {
buffer[i] = bin.charCodeAt(i);
}
var blob = new Blob([buffer.buffer], {type: type});

const body=new FormData();
body.append("myfile", blob,"test.jpg");
const method="POST";
fetch("done.php",{method,body}).then(res=>res.text()).then(console.log);
}
});
});

[blacktm06]

わざわざコードを考えていただきありがとうございます！
まだまだ私の理解度ではわからないコードだらけですのでひとつずつ調べて試していきたいと思います。