1

Boa tarde amigos, eu estou fazendo um website que a pessoa faz o cadastro no meu form e eu, utilizando AJAX, jogo os dados no banco. Eu queria saber como faço pra guardar essa imagem que a pessoa colocou no form em alguma variavel, para que minha function de upload possa usa-la assim que ele for cadastrado. Por exemplo:

function saveCliente(){
    $.post("../setters/addLojaPainel.php", $('#form').serialize(), function (response) {
        if (response.result == "1") {
            doUpload(response.id);
            getData();
        }else{
            alert(response.exception);
        }
    });
}

ou seja, quando o resultado da request for 1 (sucesso) ele utiliza o doUpload, função para armazenar a imagem no servidor, utilizando outro dado do request. Porem, não sei como armazeno a imagem que está no form.

Espero ter sido claro, é que o codigo é muito extenso e ficaria inviavel colar aqui. Grato

3
  • No momento que você envia os dados via POST para realizar o cadastro, você poderia também enviar a imagem usando um input do tipo file. No PHP você usa $_FILE['nomeDoInput'] pra controlar o arquivo enviado. Commented 9/12/2015 às 2:13
  • mas eu consigo pegar essa variavel no JS? @ClaydersonFerreira Commented 9/12/2015 às 12:16
  • Não. Mas precisa mesmo pegar no JS? Pelo que entendi da sua pergunta, você poderia fazer o cadastro do cliente e upar a imagem via PHP em uma requisição AJAX. Commented 9/12/2015 às 13:39

1 Resposta 1

0

A função serialize para formulários só é capaz de serializar dados que não sejam do tipo file

Para fazer upload da imagem, você precisará contornar essa situação alterando a forma com que a função $.ajax trata os dados:

upload sem refresh com FormData, jquery

Se preferir ainda tenho uma solução pronta no gist para resolver esse problema:

https://gist.github.com/wallacemaxters/7f29b8c8702d06a2afdf

Vou lançar o código aqui por conta da recomendação do site de não depender apenas de links externos:

(function ($) {

    var defaults = {
        cache: false,
        contentType: false,
        processData: false,
        type: 'POST',
        onProgress: new Function,
        xhr: function (xhr) {

            var xhr = $.ajaxSettings.xhr();

            xhr.upload.addEventListener('progress', function(e) {
                var percent = parseFloat(((e.loaded / e.total) * 100).toFixed(2));

                defaults.onProgress(percent, e);

            }, false);

            return xhr;
        },

    };

    $.fn.ajaxUpload = function (options) {

        var formData = new FormData;

        // if element is a form, find all inputs 

        if (this.is('form')) {

            var $el = this.find(':input');

        } else {

            var $el = this;
        }

        $el.each(function() {

            var $that = $(this);

            var name = $that.attr('name');

            var files = $that.prop('files');

            var value = $that.val();

            if (!name) return;

            // when input not has file, we know that is a common input

            if (!files) {

                formData.append(name, value);

            } else {

                // Handles single file or multiple file

                $.each(files, function(i, file) {
                    formData.append(name, file)
                });
            }
        })

        options = $.extend(defaults, options, {
            data: formData
        });

        $.ajax(options);
    }

})( jQuery );

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