1

como posso recuperar os nomes das imagens que foram enviadas para a pagina salvar via ajax não estou conseguindo eu quero pegar todas que foram que subi para o servidor com seus nomes originais pois so estou conseguindo pegar elas com os nomes na base 64 alguém poderia me ajudar?

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;

}());
1
  • Desse jeito que tu envia a imagem tu não tem o nome dela. O nome acaba sendo o que tu definiu na variável $nome 4/11/2016 às 11:15

1 Resposta 1

2

Podes usar o files desse input para saber os nomes dos ficheiros. O caminho completo com diretorias é bloqueado pelo browser mas o nome do ficheiro podes ir buscar ao input.files.

O input.files é parte da API FileList, podes ler mais aqui na MDN sobre isso. Em Inglês
Mas de maneira simplista pode dizer-se que é uma lista, e usando [].slice.call(input.files) tens uma array com os nomes.

Um exemplo seria assim:

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/

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .