upload without refresh with Formdata, jquery

Question

I need to update my script and I want to adapt my upload formats to be upados without the need to refresh. I didn’t enjoy using third party script so I researched and came across this function of jQuery FormData .

I didn’t quite understand what I read so I came here to ask for a support...

How to send files to the server (PHP) using Ajax and Formdata?

Thank you.

Answer 1

I use the jQuery, no plugin, so you can upload files.

I will illustrate in a very simplified way:

index php.

<script src="jquery.js"></script>

<script>
$(function()
{
    $('form').submit(function(e)
    {
        e.preventDefault();

        var formData = new FormData();

        formData.append('image', $('#file').prop('files')[0]);

          $.ajax({
            url: 'upload.php',
            data: formData,
            type: 'post',
            success: function(response)
            {
                console.log(response)
            },
            processData: false,
            cache: false,
            contentType: false
          });
    });
});
</script>

<form method="post" enctype="multipart/form-data">
    <input type="file" id="file" />
    <input type="submit" />
</form>

upload.php

if (move_uploaded_file($_FILES['image']['tmp_name'], $novo_nome)) {
     echo json_encode($_FILES);
}

Data must be sent via post by Ajax and, in the form, configure it as enctype="Multipart/form-data"