Estou usando um sistema de upload de imagens que achei na internet, me serve muito! Além de fazer o upload das imagens, ele redimensiona e facilita o trabalho de quem usa.
A questão é a seguinte:
Tenho um formulário com alguns inputs
, estes devem ser preenchidos com o caminho da imagem no servidor. Com um outro sistema que eu utilizava, a imagem aparecia e bastava o usuário clicar com o botão direito do mouse e copiar o endereço da imagem. Ficou difícil para mais de 50% deles.
Pensei comigo: Será que consigo mandar o caminho direto para o input? Já pesquisei muito na internet, mas sem resultado. Por isso, recorro aos gurus desta comunidade.
Caso eu esteja equivocado, existe alguma solução para esta questão?
Bom, vamos aos códigos:
O arquivo index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cadastro de Foto</title>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="js/canvas-to-blob.min.js"></script>
<script src="js/resize.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script type="text/javascript">
// 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', '0%');
// 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('Imagen(s) enviada(s) 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();
}, 1000);
});
});
}
/*
Limpa os arquivos selecionados
*/
function limpar()
{
var input = $("#imagem");
input.replaceWith(input.val('').clone(true));
}
</script>
</head>
<body>
<div class="container">
<h1>Envie sua Foto:</h1>
<form method="post" action="#" role="form">
<div class="progress">
<div id="progresso" class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0"
aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
</div>
<div class="form-group row">
<div class="col-xs-12">
<input id="imagem" type="file" accept="image/*" multiple/>
</div>
</div>
</form>
</div>
</body>
</html>
O arquivo salvar.php
<?php
// Recuperando imagem em base64
// Exemplo: data:image/png;base64,AAAFBfj42Pj4
$imagem = $_POST['imagem'];
// Separando tipo dos dados da imagem
// $tipo: data:image/png
// $dados: base64,AAAFBfj42Pj4
list($tipo, $dados) = explode(';', $imagem);
// Isolando apenas o tipo da imagem
// $tipo: image/png
list(, $tipo) = explode(':', $tipo);
// Isolando apenas os dados da imagem
// $dados: AAAFBfj42Pj4
list(, $dados) = explode(',', $dados);
// Convertendo base64 para imagem
$dados = base64_decode($dados);
// Gerando nome aleatório para a imagem
$nome = md5(uniqid(time()));
// Salvando imagem em disco
file_put_contents("../img/{$nome}.jpg", $dados);
Isso é muito importante pra mim, pois vou usar este código em todos os projetos, pela facilidade de uso. Ele manda o arquivo com muita facilidade, até os usuários com pouco conhecimento consegue utilizar (acredite, por aqui tem muitos!).
file_put_contents("../img/{$nome}.jpg", $dados);
Preciso pegar esse nome de arquivo e jogar num input, mas não estou conseguindo achar um jeito de fazer isso.