Upload image to AJAX server serialize and PHP

Asked

Viewed 626 times

1

Good afternoon friends, I am making a website that the person makes the registration in my form and I, using AJAX, play the dice in the bank. I wanted to know how to save this image that the person put in the form in some variable, so that my upload file can use it once it is registered. For example: 

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

that is, when the result of the request is 1 (success) it uses doUpload, function to store the image on the server, using other data from the request. However, I don’t know how to store the image in the form.

I hope I was clear, is that the code is very extensive and would be invincible to paste here. Grateful

php javascript ajax

  • At the moment you send the data via POST to perform the registration, you could also send the image using a file type input. In PHP you use $_FILE['nameDoInput'] to control the uploaded file.

  • but I can get this variable on JS? @Claydersonferreira

  • No. But do you really need to take JS? From what I understood of your question, you could register the client and upload the image via PHP in an AJAX request.

1 answer

0


The function serialize for forms is only able to serialize data other than the type file

To upload the image, you’ll need to get around this by changing the way the function $.ajax treats the data:

upload without refresh with Formdata, jquery

If you prefer I still have a solution in the gist to solve this problem:

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

I will release the code here because of the recommendation of the site not only depend on external links:

(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 );

Browser other questions tagged php javascript ajax

You are not signed in. Login or sign up in order to post.