jquery form plugin in wordpress to upload an image file does not work as expected

Question

Trying to use the jquery form plugin in a worpress site .

HTML:

<form id="imageform" method="post"  action="<?php bloginfo('template_directory')?>/ajaximage.php " enctype="multipart/form-data" accept-charset="utf-8" >

Upload image:

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

<button value="&nbsp;Upload&nbsp;" class="btn_upload">&nbsp;Upload&nbsp;</button>   
    <div id='preview'></div><!-- end of id preview-->

JS:

$(document).ready(function(){

   $(".btn_upload").click(function(){

        $("#preview").html(''); 

    $(".result_upload").html('<img src="'+loc+'/images/ajax-loader.gif"  alt="wait.."/>');


    $("#imageform").ajaxForm({
                            target: '#preview'

            }).submit();

            });

    }); 

ajaximage.php has

  $photoimg = trim($_POST['photoimg']);
  echo 'got it';

If I do not select any file , I get the result as expected. But if I select an image file then the error message says - "Undefined index: photoimg in line ...."

How to make it work correctly?

Answer 1

Have you tried $_FILES instead of $_POST? http://php.net/manual/en/reserved.variables.files.php

(When a file is submitted it is referenced inside $_FILES and not $_POST.)