I'm using an image upload system that I found on the internet, it's great! In addition to uploading the images, it scales and eases the work of those who use them.
The question is as follows:
I have a form with some inputs , these must be filled with the path of the image on the server. With another system that I used, the image appeared and just the user clicked with the right mouse button and copy the address of the image. It was difficult for more than 50% of them.
I thought to myself: Can I get the path straight to the input? I've done a lot of research on the internet, but no results. So I turn to the gurus of this community.
If I'm wrong, is there a solution to this question?
Well, let's go to the codes:
The 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><scriptsrc="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>
The file save.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);
This is very important to me, because I will use this code in all projects, for ease of use. It sends the file very easily, even the users with little knowledge can use (believe, here are many!).