You can achieve this with Javascript (Canvas API, Filereader API and Ajax), examples:
Example using Canvas
, FileReader
and Ajax
:
<script type="text/javascript">
function compressImage(file, MAX_WIDTH, MAX_HEIGHT, format, response) {
var img = document.createElement("img");
var reader = new FileReader();
reader.onload = function(e) {
img.src = e.target.result;
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
var width = img.width;
var height = img.height;
if (width > height) {
if (width > MAX_WIDTH) {
height *= MAX_WIDTH / width;
width = MAX_WIDTH;
}
} else if (height > MAX_HEIGHT) {
width *= MAX_HEIGHT / height;
height = MAX_HEIGHT;
}
canvas.width = width;
canvas.height = height;
ctx.drawImage(img, 0, 0, width, height);
response(
canvas.toDataURL("image/" + format).replace(/^data[:]image\/(.*);base64,/, "")
);
};
reader.readAsDataURL(file);
}
function uploadAjax(data, fileName, success, error)
{
var oReq = new XMLHttpRequest();
oReq.open("POST", "upload.php?filename=" + fileName, true);
oReq.onreadystatechange = function() {
if (oReq.readyState === 4) {
if (oReq.status === 200) {
success(oReq.responseText);
} else {
error(oReq.status);
}
}
};
oReq.send(data);
}
function enviar() {
var filesToUpload = document.getElementById('input').files;
//Gerar imagem com tamanho normal
compressImage(filesToUpload[0], 800, 600, "jpeg", function(resource) {
uploadAjax(resource, filesToUpload[0].name, function(response) {
if (response === "OK") {
alert("sucesso");
} else {
alert("Ajax: " + response);
}
}, function(errStatus) {
alert("erro: " + errStatus);
});
});
//Gerar imagem com thumb
compressImage(filesToUpload[0], 150, 150, "jpeg", function(resource) {
uploadAjax(resource, filesToUpload[0].name.replace(/\.([a-zA-Z0-9]+)$/, "_thumb.$1"), function(response) {
if (response === "OK") {
alert("sucesso");
} else {
alert("Ajax: " + response);
}
}, function(errStatus) {
alert("erro: " + errStatus);
});
});
}
</script>
<p>
<input type="file" value="" id="input">
<input type="button" value="Enviar" id="send">
</p>
<script type="text/javascript">
document.getElementById('send').onclick = enviar;
</script>
PHP should look something like:
<?php
define('PASTA_UPLOAD', '/home/user/projeto/data');
if (isset($_GET['filename']) && $_SERVER['REQUEST_METHOD'] === 'POST') {
$cl = (int) $_SERVER['CONTENT_LENGTH'];
$tmpFile = tempnam(sys_get_temp_dir(), '~upload-');
$file = fopen($tmpFile, 'w');
$fh = fopen('php://input', 'r');
if ($file && $fh) {
$data = '';
while (FALSE === feof($fh)) {
$data .= fgets($fh, 256);
}
fwrite($file, base64_decode($data));
}
if ($file) {
fclose($file);
}
if ($fh) {
fclose($fh);
}
echo 'OK';
copy($tmpFile, PASTA_UPLOAD . '/' . $_GET['filename']);
} else {
echo 'Requisição inválida';
}
It is also possible using other technologies like Flash and Java Applet, but npapi has stopped working on many browsers and some browsers like Chrome are disabling Flash by default.
The question is: but has to convert the image before playing it to the server without having to do this process of going up and replace?, is not a problem in PHP but rather in image compression on the client-side layer.
– Guilherme Nascimento
I get it, agree with you, I had a misinterpretation of the question haha. regarding using the flash I wouldn’t even quote it because besides depreciation is a Swiss cheese in safety.
– teliz
I just quoted to him understand the clients-side layer ;) ... Flash really does not bring but no advantage, at most as fallback. Until more the/
– Guilherme Nascimento