How can I retrieve the names of the images that were sent to the page saved via ajax I'm not getting it I want to get all of them that were uploaded to the server with their original names because I'm only able to get them with the base 64 names could you help me?
Jquery
// 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], 300, 'dataURL', function (imagem) {
// Salvando imagem no servidor
$.post('ajax/salvar.php', {imagem: imagem, 'nome': namme}, 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));
}
html
<form method="post" action="#" role="form">
<div>
<input type="text" id="nn" name="nome" placeholder="nome">
</div><br>
<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" name="file" accept="image/*" multiple/>
</div>
</div>
</form>
php
require "../conect.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);
$sql = mysqli_query($mysqli, "INSERT INTO imgs(nome, nome_original) VALUES ('$nome', '$name')")or die(mysqli_error($mysqli));
resize.js
window.resize = (function () {
'use strict';
function Resize() {
//
}
Resize.prototype = {
init: function(outputQuality) {
this.outputQuality = (outputQuality === 'undefined' ? 0.8 : outputQuality);
},
photo: function(file, maxSize, outputType, callback) {
var _this = this;
var reader = new FileReader();
reader.onload = function (readerEvent) {
_this.resize(readerEvent.target.result, maxSize, outputType, callback);
}
reader.readAsDataURL(file);
},
resize: function(dataURL, maxSize, outputType, callback) {
var _this = this;
var image = new Image();
image.onload = function (imageEvent) {
// Resize image
var canvas = document.createElement('canvas'),
width = image.width,
height = image.height;
if (width > height) {
if (width > maxSize) {
height *= maxSize / width;
width = maxSize;
}
} else {
if (height > maxSize) {
width *= maxSize / height;
height = maxSize;
}
}
canvas.width = width;
canvas.height = height;
canvas.getContext('2d').drawImage(image, 0, 0, width, height);
_this.output(canvas, outputType, callback);
}
image.src = dataURL;
},
output: function(canvas, outputType, callback) {
switch (outputType) {
case 'file':
canvas.toBlob(function (blob) {
callback(blob);
}, 'image/jpeg', 0.8);
break;
case 'dataURL':
callback(canvas.toDataURL('image/jpeg', 0.8));
break;
}
}
};
return Resize;
}());