Question

I’m trying to use the jQuery form plugin (http://jquery.malsup.com/form) to upload and preview photos. For some reason the strings that are supposed to be passed to PHP using the ajaxForm function are returning empty.

The Code is written below. Everytime I run the function it is returning ‘no data’ for both $name and $size so I can only assume that the form value (which should be the uploaded file) is not being passed to PHP via the ajaxForm function.

Can anyone help? I’ve been messing around with this for hours! Have tried looking at the code in the ajaxForm plugin itself but that stuff is way beyond my ability and understanding! Nor can I find any similar examples anywhere online!

Thanks!!

HTML

<form id="imageform" method="post" enctype="multipart/form-data" action="uploadphoto.php">
 <span id="pimg">
  <input type="file" id="photoimg" />
 </span>
</form>

<div id="preview"></div>

jQuery

$(document).ready(function (){

$('#photoimg').live('change', function(){ 
 $("#preview").html('');
 $("#preview").html('<img src="../../images/loader.gif" alt="Uploading...."/>');
 $("#imageform").ajaxForm({
  target: '#preview'
  }).submit();
 });

});

PHP

<?php
include('../../dbconnect.php');
session_start();
$session_id=$_SESSION['email']; // User session id
$path = "../../photos/";

$valid_formats = array("jpg", "png", "gif", "bmp","jpeg");
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST"){
 $name = $_FILES['photoimg']['name'];
 $size = $_FILES['photoimg']['size'];
 if(strlen($name)){
  echo ($name);
  }
 else {
  echo ("No Data");
  }
 if(strlen($size)){
  echo ($size);
  }
 else {
  echo ("No Data");
  }
exit;
}
?>

Answer 1

use name for input type, like change:

<input type="file" id="photoimg" />

to

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