0

I am trying to upload image using PHP and AJAX.

Without AJAX, my image/file gets uploaded perfectly but when I try to using the AJAX so the page doesn't refresh, I get no image/file uploaded!

Here is my code:

My PHP code, as I stated above, this works fine without AJAX:

if (isset($_POST['u_id_im'])) {
if ($_FILES['fileField']['tmp_name'] != "") {   
    //$details = mysql_real_escape_string($_POST['details']);
        $newname = "$askeru23.jpg";
        move_uploaded_file($_FILES['fileField']['tmp_name'], "users_fav/".$_GET['id']."/$newname");
    }
}

HTML form:

<form id="imguploader" method="post" action="" enctype="multipart/form-data">
<label style="font-size:22px; color:#666; font-weight:bold; margin-top:50px; width:100%; height:50px; padding-top:50px;">Upload Photo</label><br  /><br />
<?php echo $usersupload; ?>
<input type="hidden" name="askeruim" id="askeru"  value="<?php echo $askeru23; ?>"/><br  />

<input type="hidden" value="<?php echo $u_id; ?>" name="u_id_im"  />

<input type="file" name="fileField" id="fileField" />

<input type="submit" name="submit" id="closethebox" class="submit"  value="UPLOAD" />
</form>

jQuery code:

$(function(){
    $('#imguploader').on('submit', function(e){
        // prevent native form submission here
        e.preventDefault();

        // now do whatever you want here
        $.ajax({
            type: $(this).attr('method'), // <-- get method of form
            url: $(this).attr('action'), // <-- get action of form
            data: $(this).serialize(), // <-- serialize all fields into a string that is ready to be posted to your PHP file
            beforeSend: function(){

            },
            success: function(data){
            }
        });
    });
});

As a side note, the AJAX code is within a document ready function.

Could someone please advise on this?

Thanks

i alarmed alien
  • 9,412
  • 3
  • 27
  • 40
shell
  • 41
  • 1
  • 11
  • did you look into `enctype`? you need to set it to `multipart/form-data` when submitting files. also assync file uploading is not supported in older browsers / basic serialization. – Logan Murphy Oct 07 '14 at 17:46
  • @LoganMurphy, not sure what you mean by looking into enctype! not sure what you mean by setting multipart/form-data either. also, older browsers are not supported in my application! older browsers are not even supported by their own developers so its about time for people to come to 2014 or else be left behind. – shell Oct 07 '14 at 17:50
  • possible duplicate of [Sending multipart/formdata with jQuery.ajax](http://stackoverflow.com/questions/5392344/sending-multipart-formdata-with-jquery-ajax) – Logan Murphy Oct 07 '14 at 17:52
  • Just for reference, check this out: http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously-with-jquery/8758614#8758614 – Jonathan Kuhn Oct 07 '14 at 17:52
  • http://stackoverflow.com/questions/24168040/upload-multiple-files-with-php-and-jquery/24168617#24168617 – Alexander Ceballos Oct 07 '14 at 17:52
  • Hi @shell, you can check [link](http://malsup.com/jquery/form/), I have used this plugin with Symfony2 project, and work fine. – kuldipem Oct 07 '14 at 18:05

1 Answers1

0

form action="" ... you need to set the url for ajax to send to, else its sending to a blank address.

<form id="imguploader" method="post" action="<?=basename($_SERVER['PHP_SELF'])?>" enctype="multipart/form-data">
sjagr
  • 15,983
  • 5
  • 40
  • 67
Andrew Gurklies
  • 1