Images duplicating at the time of transfer with Ajax jQuery!

Asked

Viewed 52 times

2

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.

  • What is the code for the Preview function?

  • Hello Marabesi, the Preview event is one I’m using to make a preview of the upload, I found it unnecessary to post the code here!

1 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;
});
  • Hello Sam, very obg, that’s right, I’m still starting with js, ejquery, and wanted to do an upload function for any upload form. Good more much obg and I will give a studied on events more thoroughly. And again sorry the question a bit beast! Until more champion

Browser other questions tagged

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