Submit file with jquery

Question

Submit file with jquery

Navigation

#1 by (1 votes)

0

Good afternoon, I need a code that simulates the submission of an input file file that when selected some value, it submits to the php in the same way as if it were submitting in an html form. For example

<form action="" method="post" enctype="multipart/form-data">
<input type="file" name="arquivo">
</form>

And in php, it would get this way ...

<?php
//Exemplo de como receberia o valor do input
$arquivo = $_FILES['arquivo'];
?>

What I need is that in jquery I can do this, without needing an html form and a button to submit it, but as soon as the input selects a value it submits the same as the above code.

The code I already have is this ...

HTML

<input type="file" name="am" id = 'am' accept='.pdf'>

JQUERY

      $(document).ready(function(){
            // Quando valor for alterado no input
            $("#am").change(function(){
                // Se o valor alterado do input for diferente de nada
                if($("#am").val()!=""){
                    // Aqui deve ficar o código para submeter para o php
                }
            });
        });

php html jquery input

asked by anonymous 19.01.2018 / 18:13

1 answer

Register selected checkbox values with php and pdo [closed] How to delete input and bring filter options back

score 1 · Accepted Answer

To upload an image without using input-file , you can do this as follows:

$("#am").on('change', function (e) {

    var reader = [];

    for (var i = 0; i < e.target.files.length; i++) {
        reader[i] = new FileReader();

        reader[i].onload = function (e) {
            //Essa função será executa assim que a imagem for carregada totalmente no cliente, o caminho pode ser adquirido com a variável 'e.target.result´
        }

        reader[i].readAsDataURL(e.target.files[i]); // Essa linha é responsável por iniciar o carregamento da imagem

        var formData = new FormData();
        formData.append('file', e.target.files[i]);

        $.ajax({
            url: 'para_onde_o_arquivo.ira',
            cache: false,
            contentType: false,
            processData: false,
            data: formData,
            type: 'post',
            beforeSend: function() {
                // O que fazer antes de enviar
            },
            xhr: function() {
                let myXhr = $.ajaxSettings.xhr();
                if(myXhr.upload){
                    myXhr.upload.addEventListener('progress', function (e) {
                        if(e.lengthComputable){
                            let max = e.total;
                            let current = e.loaded;

                            let percentual = Math.floor((current * 100) / max);

                            if(percentual < 100)
                            {
                                //Neste ponto a variável 'percentual' contém qual a porcentagem da imagem que já foi enviada para o servidor
                            }
                        }
                    }, false);
                }
                return myXhr;
            },
            success: function(data) {
                // O que fazer quando terminar de carregar
            },
            complete: function(data) {
                // O que fazer mesmo dando erro ou terminando de carregar
            },
            error: function(err){
                // O que fazer se der erro ao enviar
            }
        });
    }
});

And in your file PHP you get the image normally in the variable $_FILES .

NOTE: This way a request will be made for each image.