How to recover original image name with jQuery?

Question

how can I recover the names of the images that were sent to the save page via ajax I am not getting I want to take all that were I went up to the server with their original names because I am only able to catch them with the names in base 64 someone could 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;

}());

Answer 1

You can use the files input to know file names. The complete path with directories is blocked by the browser but the file name can be fetched from the input.files.

The input.files is part of the Filelist API, you can read more here at MDN about that. ^{In English}
But in a simplistic way it can be said that it is a list, and using [].slice.call(input.files) you have an array with the names.

An example would be like this:

var ficheiros = document.getElementById('imagem');
ficheiros.addEventListener('change', function(){
	var nomes = [].map.call(this.files, function(f){ return f.name; });
	console.log(nomes);
});

<input id="imagem" type="file" name="file" accept="image/*" multiple/>

jsFiddle: https://jsfiddle.net/nu4s9jf2/