画像アップロードフォームを作りたい。
しかし、現在はスマホの画質が良すぎるためアップロードに時間がかかる。
ということで、一旦javascriptで縮小してからアップロードするという方法にする。
jqueryを読み込んである前提で以下をコピペ
<script src="/js/load-image.all.min.js"></script>
<script>
$(function () {
$(document).on('change', '#img', function() {
// 選択中のファイルの一つ目
var file = this.files[0];
// ファイルを選択しなかった場合
if(!file) return;
// ファイル形式の中にimageが含まれない場合
if(!/image/.test(file.type)) {
alert('画像を選択してください。');
return;
}
// 読み込み用の関数で読み込み完了時に、HTMLにcanvas追加
load(file, function(canvas) {
// 再度アップロードした場合は一旦削除する
$("#dst canvas").remove();
dst.appendChild(canvas);
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'});
var name, fd = new FormData();
fd.append('social_id',"999"); // ファイルを添付する
fd.append('img', blob); // ファイルを添付する
$("#upload").hide();
$.ajax({
url: "/hoges/add/", // 送信先
type: 'POST',
data: fd,
processData: false,
contentType: false
})
.done(function( data, textStatus, jqXHR ) {
alert("送信完了");
$("#upload").show();
$('#dst').hide();
})
.fail(function( jqXHR, textStatus, errorThrown ) {
// 送信失敗
console.log("失敗");
});
});
});
function load(file, callback) {
// canvas: true にすると canvas に画像を描画する(回転させる場合は必須オプション)
var options = {
maxHeight: 600,
maxWidth: 600,
canvas: true
};
loadImage.parseMetaData(file, function (data) {
if (data.exif) {
options.orientation = data.exif.get('Orientation');
}
$('#dst').show();
// 画像の読み込み。完了時に callback が呼び出される
loadImage(file, callback, options);
});
}
});
</script>
<div id="upload">
<div id="dst" style="display: none;"></div>
<!-- ファイル選択ボタン -->
<?php echo $this->Form->create($valid, ['type' => 'file']); ?>
<div id="upload-btn">
<?php echo $this->Form->input('img', [
'label' => '画像を選んで確認',
'type' => 'file',
]); ?>
</div>
<?php echo $this->Form->input('social_id', [
'value' => 999,
'type' => 'hidden'
]); ?>
<?php echo $this->Form->end(); ?>
</div>
送信先の hogescontoroller/add
public function add()
{
pr($this->request->data);//第二引数に cron を入れれば cron用ログに書き出す
$this->autoRender = false;
}
結果
/var/www/html/twi.ski/plugins/Okws/src/Controller/DebugsController.php (line 50)
2018-05-24 16:02:27 Debug: Array
(
[social_id] => 999
[img] => Array
(
[tmp_name] => /tmp/phpMQledW
[error] => 0
[name] => blob
[type] => image/jpeg
[size] => 33726
)
)
2018-05-24 16:02:30 Debug: Array
(
[social_id] => 999
[img] => Array
(
[tmp_name] => /tmp/phpILXG7Q
[error] => 0
[name] => blob
[type] => image/jpeg
[size] => 58598
)
)
ちゃんとアップロードできますね!