CODEWITHSUNDEEP
phpjquery
user1415759
user1415759

Reputation:

PHP-Jquery image upload not working

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();
}**

Upvotes: 0

Views: 648

Answers (3)

Abhishek
Abhishek

Reputation: 691

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

Upvotes: 1

Mukiza Andrew
Mukiza Andrew

Reputation: 763

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

Upvotes: 0

oezi
oezi

Reputation: 51797

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' }

Upvotes: 1

Related Questions