0
I understand almost nothing and want to help a friend. He has a script that resizes the image before doing the upload and saves the resized image with PHP
. Turns out he’d like to put a cap on Mbs to the image preventing the user from sending gigantic images, overloading the server.
Follows below the script:
// Iniciando biblioteca
var resize = new window.resize();
resize.init();
// Declarando variáveis
var imagens;
var imagem_atual;
// Quando carregado a página
$(function ($) {
// Quando selecionado as imagens
$('#imagem').on('change', function () {
enviar();
});
});
/*
Envia os arquivos selecionados
*/
function enviar(){
// Verificando se o navegador tem suporte aos recursos para redimensionamento
if (!window.File || !window.FileReader || !window.FileList || !window.Blob) {
alert('O navegador não suporta os recursos utilizados pelo aplicativo');
return;
}
// Alocando imagens selecionadas
imagens = $('#imagem')[0].files;
// Se selecionado pelo menos uma imagem
if (imagens.length > 0){
// Definindo progresso de carregamento
$('#progresso').attr('aria-valuenow', 0).css('width', '35%').html('Carregando..');
// Escondendo campo de imagem
$('#imagem').hide();
// Iniciando redimensionamento
imagem_atual = 0;
redimensionar();
}
}
/*
Redimensiona uma imagem e passa para a próxima recursivamente
*/
function redimensionar(){
// Se redimensionado todas as imagens
if (imagem_atual > imagens.length){
// Definindo progresso de finalizado
$('#progresso').html('Imagem enviada com sucesso');
// Limpando imagens
limpar();
// Exibindo campo de imagem
$('#imagem').show();
// Finalizando
return;
}
// Se não for um arquivo válido
if ((typeof imagens[imagem_atual] !== 'object') || (imagens[imagem_atual] == null)){
// Passa para a próxima imagem
imagem_atual++;
redimensionar();
return;
}
// Redimensionando
resize.photo(imagens[imagem_atual], 800, 'dataURL', function (imagem) {
// Salvando imagem no servidor
$.post('ajax/salvar.php', {imagem: imagem}, function() {
// Definindo porcentagem
var porcentagem = (imagem_atual + 1) / imagens.length * 100;
// Atualizando barra de progresso
$('#progresso').text(Math.round(porcentagem) + '%').attr('aria-valuenow', porcentagem).css('width', porcentagem + '%');
// Aplica delay de 1 segundo
// Apenas para evitar sobrecarga de requisições
// e ficar visualmente melhor o progresso
setTimeout(function () {
// Passa para a próxima imagem
imagem_atual++;
redimensionar();
}, 100);
});
});
}
How do I limit the size of the image that will be loaded to a maximum of 5MB? You can create something that checks the image size before doing the upload and before you start resizing it and saving via php?
It is better to do this validation with php, on the server side
– Victor Eyer
All your code is javascript, forget it, you can’t trust any javascript. The user can even turn it off or can send the file outside a browser, ignoring any javascript validation. Want to limit? Use
upload_max_filesize
, is not enough? Useclient_max_body_size
in NGINX (or equivalent in other webservers), not only to depend on PHP. If you have already done this and you just want to show a warning (saying that you exceed the limit, for example) in javascript the question is different, so you do not want to prevent them from overloading, the objectives are other.– Inkeliz
Yes, my goal is just to do a check and show a warning . As to prevent from the server side.. is a great idea tbm. but I would like to do this small function of checking the file size and make an alert
– ALessandro