ajax form isn't submitting

Question

I have this jquery code to submit the form however it isn't submitting the form. I'm trying to upload images with this jquery I have php written to upload it what is the problem with my code?

$("#loader").hide();
$("#display").hide();
$("#display1").hide();
$("#submit").click(function(){
   $(".form_cont").hide();
   $("#loader").show();          
   $.ajax({
      type: "POST",
      url: "upload.php",
      dataType:"json",
      success: function (response) {
         if(response.status === "success") {
            $("#display").show();
         } else {
            $("#display1").show();
         }
      }
   });
   return false;        
});

I guess jquery.Ajax() doesnt support upload yet, you need plugin to do that, am I wrong? — egig, Mar 17 '13 at 12:05
@Kathiravan see it again I'm submitting the form to upload.php yes I'm submitting single image — Athar Ahmed, Mar 17 '13 at 12:07
@Danish Sorry, I have no idea which is best, but you can google it, it's easy to find. — egig, Mar 17 '13 at 12:11
Hi Danish check the code i posted as answer try it it will helpful... — Kathiravan, Mar 17 '13 at 12:18

Kathiravan · Accepted Answer · 2013-03-17T13:39:30.230

1

May be try this it will work.Demo Link

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>Ajax file upload</title>
</head>

<body>    
<form action="upload.php" method="post" enctype="multipart/form-data" target="workFrame" >
<input type="file" name="file" />
<input type="submit" />
</form>
<iframe id="workFrame" src="about:blank" style="display:none;"></iframe>
<div id="image_disp"></div>

</body>
</html>
<script src="http://code.jquery.com/jquery-1.8.1.min.js" type="text/javascript"></script>
<script>
    $('form').on('submit', function () {
    //check if the form submission is valid, if so just let it submit
    //otherwise you could call `return false;` to stop the submission
});

$('#workFrame').on('load', function () {
            $('#image_disp').html('');
    //get the response from the server
    var response = $(this).contents().find('body').html();
            $('#image_disp').html('<img src="images/'+response+'"/>');
    //you can now access the server response in the `response` variable
    //this is the same as the success callback for a jQuery AJAX request
});

Upload.php

<?php 
  if(isset($_FILES['file']) && $_FILES['file'] != '')
  {
    if(isset($_FILES['file']['name']) && $_FILES['file']['name'] != '')
    {
            $image_name                     = explode(".",$_FILES['file']['name']);
            $image_type                     = array_pop($image_name);
            move_uploaded_file($_FILES['file']['tmp_name'],'images/upload.'.$image_type);
            echo 'upload.'.$image_type;
    }
  }
 ?>

edited Mar 17 '13 at 13:39

answered Mar 17 '13 at 12:16

Kathiravan

689
1
7
22

Your code is not working it is opening upload.php in new window its ajax isn't working – Athar Ahmed Mar 17 '13 at 12:32
@Danish: It will work fine for me. – Kathiravan Mar 17 '13 at 12:35
I have already changed this. but still no luck – Athar Ahmed Mar 17 '13 at 12:36
May be your jquery will not be included in the form change the src tag from `jquery-1.8.1.min.js` to `http://code.jquery.com/jquery-1.8.1.min.js` – Kathiravan Mar 17 '13 at 12:37
here is what I'm calling ` – Athar Ahmed Mar 17 '13 at 12:45
Try to save the `jquery.min.js` in your local machine and include it. – Kathiravan Mar 17 '13 at 12:51
Check the image folder permission and also whether uploaded image is there? – Kathiravan Mar 17 '13 at 12:54
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/26322/discussion-between-danish-and-kathiravan) – Athar Ahmed Mar 17 '13 at 12:56
I found that `target="workFrame"` was causing that when I removed it now it is opening as default and yes image is on upload folder but still jquery isn't working – Athar Ahmed Mar 17 '13 at 12:58

score 1 · Answer 2 · answered Mar 17 '13 at 12:17

1

File upload are not possible with Ajax try a plugin like http://www.uploadify.com/

answered Mar 17 '13 at 12:17

Jay Bhatt

5,601
5
40
62

thanks for your suggestion but I already tried with uploadify but I already have my own php code just trying to fix my jquery to get it work. – Athar Ahmed Mar 17 '13 at 12:18
You can customize the server side upload script and use you own code. http://www.uploadify.com/documentation/uploadify/customizing-the-server-side-upload-script/ – Jay Bhatt Mar 17 '13 at 12:21

ajax form isn't submitting

2 Answers2