0

I'm trying to post form data through ajax

form1.php

I use request to get all URL parameter data

$_REQUEST["Ename"];
$_REQUEST["eImg"];

To upload the image,i use this code http://www.9lessons.info/2011/08/ajax-image-upload-without-refreshing.html

In the above link,you can see the source code,in the place of $_FILES['photoimg']['name'];,i use $_FILES['image']['name']; but it is not uploading the file and giving success message.

include('db.php');
session_start();
$session_id='1'; // User session id
$path = "uploads/";

I removed script that is marked with **

$valid_formats = array("jpg", "png", "gif", "bmp","jpeg");
    **if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST")
    {**

$name = $_FILES['image']['name'];
$size = $_FILES['image']['size'];
if(strlen($name)) {
  list($txt, $ext) = explode(".", $name);
  if(in_array($ext,$valid_formats)) {
    if($size<(1024*1024)) { // Image size max 1 Mb
      $actual_image_name = time().$session_id.".".$ext;
      $tmp = $_FILES['image']['tmp_name'];
      if(move_uploaded_file($tmp, $path.$actual_image_name)) {
        mysql_query("UPDATE users SET profile_image='$actual_image_name' WHERE uid='$session_id'");
        echo "<img src='uploads/".$actual_image_name."' class='preview'>";
      } else {
        echo "failed";
      } 
    } else {
      echo "Image file size max 1 MB";
    }
  } else {
    echo "Invalid file format.."; 
  }
}  **else {
  echo "Please select image..!";
  exit();
}**
Improve this question
8
  • Your javascript is not the same as in the tutorial...they use .ajaxForm() and you use .ajax(). Commented Jun 20, 2012 at 9:51
  • @PhpMyCoder:I've written my own jquery only used their PHP upload script. Commented Jun 20, 2012 at 9:52
  • And that's likely why it doesn't work. Use their javascript. Yours doesn't submit the file properly. Commented Jun 20, 2012 at 9:53
  • @PhpMyCoder:They show preview,i do not want that,when i echo my request,i get the file name.What's wrong in my jquery script Commented Jun 20, 2012 at 9:55
  • @PhpMyCoder:Can you correct my jquery script. Commented Jun 20, 2012 at 9:57

3 Answers 3

Reset to default
1

you simply can't upload files via $.ajax().

you'll have to use some trycky iframe-stuff or something like that to make this work. luckily, there are ready-to-go plugins for jquery to handle this for you (like $.ajaxForm() for example wich seems to be the one that's used in the tutorial you're reading).

EDIT:
the plugin also allows to add extra data thats not present in the form itself. to quote the documentation:

data
An object containing extra data that should be submitted along with the form.

data: { key1: 'value1', key2: 'value2' }
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

:I've few other fields in my form.How id i send the data throught that plug in,i've mentioned here.
they used an action for the form, because this isn't "real" ajax. you can't upload files via ajax. what this plugin does is submitting the form to a hidden iframe and get the response from there, so it just looks like ajax but isn't.
i'm going to give up. again: file-upload via ajax isn't possible. you have to use another solution wich is clearly described in the tutorial you've posted as well as in the documentation of the plugin used by the tutorial: jquery.malsup.com/form/#getting-started
1

For upload image by ajax you should use an iframe and set its id to form target.

Please have a look at http://www.coursesweb.net/ajax/upload-images

It is very simple code to upload image

Improve this answer

Comments

0

That won't work! Images are handled differently from the text data in Ajax so you would have to do more than just post it using the $.ajax({}) method.

You can however use the jquery.form.js plugin it works perfect http://jquery.malsup.com/form/#download there is a tutorial on how to use it here

Any ways I have used it my self so let me elaborate for you.

The JavaScript code is here

$('.uploadForm').live('click', function(evt){   
     $('#feedback').html(' ');
     $('#feedback').html('<img src="images/loader_image.gif" alt="Uploading...."/>');
     $("#formID").ajaxForm({
           target: '#feedback'
           }).submit();
    evt.preventDefault();   
 });

If your PHP code is fine this should work ..... Just post the rest of the form fields in the normal way way This should work for you. If the PHP code is fine

For example if you had other form fields like firstname and lastname in form like this one 

<div class="form">
 <fieldset class="ui-corner-all">
   <h3 class="ui-widget-header ui-corner-top" align="center">Client information</h3>
     <form action="save_new_client.php" enctype="multipart/form-data" id="clientForm" method="POST">
     <label>First Name</label>

      <input name="firstname" type="text" id="firstname" class="required" minlength="3"/>
      <label>Lastname</label>
      <input name="date_added" type="text" id="date_added" class="dateEst" />
       <label>Image</label>
       <input name="photo" type="file" id="photo" />

      <input type="submit" name="button" id="button" value="Save" class="uploadForm"/>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
       <input type="reset" name="reset" id="button" value="Cancel" /></td>
   </form>
 </fieldset>
<div id="feedback"></div>
</div>

Below it you'll just need to add a div or paragraph to hold your feedback message .... then the rest will be just fine (like I said if your PHP code is okay)I have not looked through it alot

Improve this answer

12 Comments

You don't have to worry about the other fields, they will be serialized and posted normally like other ordinary forms.
:I do not want to show preview,i looked at the malsup,i'm not clear ,how to add my form fields to that script.Can you tell me ,how i do that in the here link.
That's easy remove the preview from the PHP code and replace it with a success message
:Will this submit the form or submitting the data is through is ajax.
it will submit the form data and image through Ajax .... just follow this tutorial and eliminate the preview .....<a href="9lessons.info/2011/08/…> or just look at the edits I have made to my first answer
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.