ajax upload does not pass variables

Question

I’m not getting past the variables in the ajax method.

<input type="file" id="id-input-file-2" name="arquivo" class="form-control arquivo" />
<input type="hidden" name="ID_Cotacao" id="ID_Cotacao" value="555">

.

$(function(){
    $('.arquivo').change(function(e){
        if ($('.arquivo').val() != "") {
            e.preventDefault();
            var formData = new FormData();

            formData.append('arquivo', $('.arquivo').prop('files')[0]);
            formData.append('nomeArquivo', $('.arquivo').val());
            formData.append('id_cotacao', $('#ID_Cotacao').val());

            $.ajax({
                url: 'cotacoesEditarUpload.php',
                data: formData,
                type: 'GET',
                success: function(){
                    alert("Enviado com sucesso."),
                    $(".listaArquivo").load(window.location + " .listaArquivo")
                },
                processData: false,
                cache: false,
                contentType: false
            });
        };
    });
});

How it appears in the browser console: quotesEditarUpload.php? [Object Formdata]&_=1441423098339

What am I doing wrong?

Answer 1

I’m assuming you want to do a file upload.

File upload cannot be performed on a request GET. Not that it’s impossible (it would be necessary to read the file data and encode it into something like Base64 or some other representation that can be placed in an HTTP query).

Use to upload the file method POST or the PUT. On the server side, each of them has particularities in the data processing, being the POST more traditional especially if you use PHP.

With the exception of the request method, I don’t see another problem with your code interfering with sending the FormData.

Excerpt from the code:

$.ajax({
    url: 'cotacoesEditarUpload.php',
    data: formData,
    type: 'POST',
    success: function(){