PHP & Jquery Image Upload - No file issue

Question

I am using an old script I used on previous projects to upload images. The project only used HTML and PHP making uploading easier to handle as such! :)

I am quite new to Jquery and Ajax handlers and due to my current projects high use of handlers I need to upload things without refreshing entire page, perhaps just a div.

My Script:

 function postfile() {
var filename = $("#image").val();
      $.ajax({
          type: "POST",
          url: "pages/minutes1.php",
          secureuri:false,
      fileElementId:'image',
          enctype: 'multipart/form-data',
          data: "submit=yes&image=" + {file: filename},
           success: function(msg5){
                $("#upform").html(msg5);
           }
      });
}

My PHP and HTML:

    <?
/**
* The following uploader was not originally suited for text based files<br>
* Copied and Re-used from previous projects<br>
*/
$submit = $_POST['submit'];
 if($submit=="yes") 
 {
//define a maxim size for the uploaded images in Kb
 define ("MAX_SIZE","100"); 

//This function reads the extension of the file. It is used to determine if the file  is an image by checking the extension.
 function getExtension($str) {
         $i = strrpos($str,".");
         if (!$i) { return ""; }
         $l = strlen($str) - $i;
         $ext = substr($str,$i+1,$l);
         return $ext;
 }

//This variable is used as a flag. The value is initialized with 0 (meaning no error  found)  
//and it will be changed to 1 if an error occurs.  
//If the error occurs the file will not be uploaded.
 $errors=0;
//checks if the form has been submitted
    //reads the name of the file the user submitted for uploading
    $image=$_FILES['image']['name'];
if(!$image){
?>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td class="tabcol1 font1" style="text-align: center;">
There was no minutes file attached!
</td></tr>
<tr>
<td class="tabcol4 font1" style="text-align: center;">
Please wait as you are directed back
</td></tr>
</table>
<?
}elseif($image) 
    {
    //get the original name of the file from the clients machine
        $filename = stripslashes($_FILES['image']['name']);
    //get the extension of the file in a lower case format
        $extension = getExtension($filename);
        $extension = strtolower($extension);
    //if it is not a known extension, we will suppose it is an error and will not  upload the file,  
    //otherwise we will do more tests
 if (($extension != "doc") && ($extension != "txt")  && ($extension != "pdf") && ($extension != "odt") && ($extension != "docx") && ($extension != "rtf")) 
        {
?>
<b>The file type uploaded is not supported!</b><br><br>

<b>Supported formats:</b> doc, docx, pdf, odt, txt, rtf
<?
}
        else
        {
//get the size of the image in bytes
 //$_FILES['image']['tmp_name'] is the temporary filename of the file
 //in which the uploaded file was stored on the server
 $size=filesize($_FILES['image']['tmp_name']);

//compare the size with the maxim size we defined and print error if bigger
if ($size > MAX_SIZE*1024)
{
?>
File size, too large! (if you need lieniency please contact webmaster)
<?
}else{
//we will give an unique name, for example the time in unix time format
$exam = substr("$filename", 0, -2);
function MakeRandom($minLength, $lastNr){

   $i = 0;
   while ($i <= $minLength){
      $randomnr = ($i === $minLength) ? 1 : rand(0, 9);
      $strNumber = (!$strNumber) ? $strNumber = $randomnr : $strNumber .= $randomnr;
      $i++;
   }

   return $strNumber;
}

// show the number
$num = MakeRandom(5, 1);
$col = "$exam$num";
$image_name = $col.'.'.$extension;
//the new name will be containing the full path where will be stored (images folder)
$newname="minutes/".$image_name;
//we verify if the image has been uploaded, and print error instead
$copied = copy($_FILES['image']['tmp_name'], $newname);
if (!$copied){
?>
File uploaded and E-mail sent!
<?
}
}
}
}
}else{
?>
<div id="upform">
<form method="post">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td class="font1 tabcol1">
<!-- begin 2 column table -->
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td class="font1">
&nbsp;<b>Choose a file to upload:<br> <input id="image" name="image" type="file" /><br />
<input type="button" id="submit" name="submit" value="submit" onclick="postfile()">
</td>
<td class="font1"></td>
</tr>
</table>
<!-- End 2 column table -->
</td></tr>
</table>
</form>
</div>
<?
}
?> 

The problem I am getting is, even when I have added a file and pressed submit,

it gives me my no image error.

I believe I have written the script wrong but I could not find any syntax errors.

All help would be appreciated!

Thank you in advance :)

Answer 1

$.ajax doesn't support file uploads the same way that a normal form submission does. The usual suggestion to get around this is to embed your upload script into an iframe so it doesn't reload the page when you upload.

Here's an example .