Images duplicating at the time of transfer with Ajax jQuery!

Question

Well, first of all, I’m sorry if I’m being an inconvenience to the question, it’s my first. I have a function in jQquery and Ajax that upload photos and have a PHP page to validate: This is the HTML:

<form method="" action="" enctype="multipart/form-data" id="upload" onclick="Uploadfile('upload','upload_com_previsualicao_funcao.php')">
        <input type="file" name="imagem" id="imagem" onchange="Preview(this,'imagem')">
        <br><br>
        <input type="submit" value="enviar">
    </form>

And here is Javascript:

function Uploadfile(form,caminho){
    form = '#'+form;
    console.log(form);
    // console.log(caminho);

$(''+form+'').submit(function(){//ao clicar no submit
    $.ajax({
        url: ''+caminho+'',
        method: "post",
        data: new FormData($(''+form+'')[0]),
        cache: false,
        contentType: false,
        processData: false,
        beforeSend: function(){
            $('#loading').fadeIn("fast");//faz aparecer rapidamente
        },
        success: function(retorno){
            alert("enviada");
            $('#loading').fadeOut(3000);//faz desaparecer
            // alert(retorno);
        },
        error: function( data ) {
            alert( "Não foi possivel enviar a resposta. Tente denovo mais tarde!" );
        },
        cache: false,
        contentType: false,
        processData: false
        });
    return false;
});
}

And here the PHP:

<?php
if (!$_FILES["imagem"]["error"]>0)
{
$n = rand (0, 10000000);
$extensao = pathinfo($_FILES["imagem"]["name"], PATHINFO_EXTENSION);
$img = $n."resposta_atividade.".$extensao;

move_uploaded_file($_FILES['imagem']['tmp_name'], "paratodos/".$img);

echo "<pre>";
echo "<br>";
echo "$img";
echo "<br>";
print_r($_FILES);
echo "<br>";
echo "</pre>";
echo "a";
}
?>

He even uploads normally but for reasons I don’t know he duplicates the image, I believe the error is in Ajax and not in PHP.

I don’t know if I was clear, but basically it’s how he uploads right but ends up duplicating the image.

And these quotes that I’m concatenating in jQuery, I used because I wasn’t identifying variables like URL, id and tals.

Answer 1

Don’t put the Event Handler .submit within the function and do not use onclick in the form to call a function. When you click any part of the form area it will call the function and create a new one Event Handler, and when you click the button to submit the form, you will call the function 2 times, so you are duplicating the image because you are actually doing 2 uploads.

No extra function needed, just use the function of .submit. In it you can get all the data from the form that triggered the event.

Put the URL in the action that Javascript will take and put in Ajax:

<form method="" action="upload_com_previsualicao_funcao.php" enctype="multipart/form-data" id="upload">
   <input type="file" name="imagem" id="imagem" onchange="Preview(this,'imagem')">
   <br><br>
   <input type="submit" value="enviar">
</form>

And in Ajax you get the URL with this.action and the form itself with $(this):

$('form').submit(function(){//ao clicar no submit
    $.ajax({
        url: this.action,
        method: "post",
        data: new FormData($(this)[0]),
        cache: false,
        contentType: false,
        processData: false,
        beforeSend: function(){
            $('#loading').fadeIn("fast");//faz aparecer rapidamente
        },
        success: function(retorno){
            alert("enviada");
            $('#loading').fadeOut(3000);//faz desaparecer
            // alert(retorno);
        },
        error: function( data ) {
            alert( "Não foi possivel enviar a resposta. Tente denovo mais tarde!" );
        },
        cache: false,
        contentType: false,
        processData: false
        });
    return false;
});