CodingForums.com - Ajax jquery and image upload ;/

Hi..

I have been searching the internet for most of the day, trying to solve my problem.

Code:

page.js

$('#addButton').click(function(){

                $.blockUI({ message:'<img src="images/loading.gif" alt="Loading" />', css:{'color':'#ef6900','border':'1px #626262 solid','padding':'20px','text-align':'center'}});

                $('#content').slideUp(800,function(){

                        $.ajax({

                                type: "POST",

                                url: "page.php",

                                data: ".rand=klasdnsaefr",

                                success: function(data){

                                        $('#content').html(data);

                                        $('#content').slideDown(800,function(){

                                                $.unblockUI();

                                        });

                                }

                        });

                });

                return false;

        });

});

Clicking ADD button "slidedown" this case from page.php

Code:

case 'klasdnsaefr':

?>



        <form action="#" method="post" enctype="multipart/form-data">

        <div id="errorMsg" class="errMsg" style="display:none;margin-bottom:15px;" align="left"></div>

        <FIELDSET class="admin_fieldset">

        <legend>ADD NEW</legend>

        <table width="100%" border="0" cellspacing="1" cellpadding="3">

        <tr>

         <td width="150px" align="right" valign="middle" class="bg12">TITLE</td>

      <td align="left" valign="middle"><input type="text" class="textarea" id="title" name="title" style="width:250px;" /></td>

        </tr>

        <tr>

         <td width="150px" align="right" valign="middle" class="bg12">IMAGE</td>

      <td align="left" valign="middle">

        <input type="file" name="fileToUpload" id="image" class="box" style="width:250px;" />

          </td>

        </tr>

        </table>

        </FIELDSET>



        <FIELDSET class="admin_fieldset">

        <legend>DESCRIPTION</legend>

        <textarea cols="60" id="desc" name="desc">Some Initial Content was in this textarea</textarea>

        <div style="margin-bottom:5px;margin-top:15px;text-align:center;"><input type="button" value="SAVE" onClick="JavaScript: saveContent(0);" />&nbsp;&nbsp;&nbsp;<input type="button" value="CLOSE" onClick="JavaScript: closeContent();" />

</div>

        </FIELDSET>

</form>



<?

break;

saveContent function from page.js

Code:

function saveContent(id)

{

        $('#errorMsg').hide();

        var error=new Array();

        if(id==0)

        {



                if(jQuery.trim($('#title').val()).length==0)

                {

                        error.push('- Enter Title.');

                        $('#title').val('');

                

        }

        if(jQuery.trim($('#image').val()).length==0)

                {

                        error.push('- Enter image.');

                        $('#image').val('');

                

        }

        

        if(jQuery.trim($('#desc').val()).length==0)

                {

                        error.push('- Enter desctiption.');

                        $('#desc').val('');

                

        }

        if(error.length==0)

        {

                $.blockUI({ message:'<img src="images/loading.gif" alt="Loading" />', css:{'color':'#ef6900','border':'1px #626262 solid','padding':'20px','text-align':'center'}});

                var args={

                        '.rand':'abcdefghijkl',

                        'title':$('#title').val(),

                        'image':$('#image').val(),

                        'desc':$('#desc').val(),

                        'pageID':pageID

                };

                $.post(

                        "page.php",

                        args,

                        function(data)

                        {

                                $.blockUI({ message:data.message, css:{'border':'2px #575757 solid','padding':'5px'}});

                                if(data.flag)

                                {

                                        $('#userTab').replaceWith(data.body);

                                        closeContent();

                                }

                        },

                        "json"

                );

        }

else

                {

                        var px=error.length*14;

                        $('#errorMsg').css({ 'height':px+'px' });

                        $('#errorMsg').html(error.join('<br>'));

                        $('#errorMsg').fadeIn(800);

                }

        }

}

Code:

case 'abcdefghijkl':



$time=mktime();

$folder="../";

if (is_uploaded_file($_FILES['image']['tmp_name']))

        {

$fileData = file_get_contents($_FILES['image']['tmp_name']);

$save=$folder.$fileData;

move_uploaded_file(($_FILES['image']['tmp_name']),$save);



$Q="INSERT

INTO ".dbPrefix."table_name

(

title,

description,

image,

updtime

)

VALUES

(

'".$stObj->processData($_POST['title'])."',

'".$stObj->processData($_POST['desc'])."',

'".$stObj->processData($_POST['image'])."',

'".$time."'

)";

mysql_query($Q) or die(mysql_error());

$body=getBody();

echo json_encode(array('flag'=>true,'message'=>msgBox('Success','- Uploaded and stored in database.'),'body'=>$body));

}

else

        {

        $body=getBody();

        echo json_encode(array('flag'=>true,'message'=>msgBox('ERROR','- Error CRAP.'),'body'=>$body));

        }

break;

NOW, my problem.. If I am using a simple text-field for image, and quote the php image saving and moving, all information will be stored in DB.

Title, description, image.jpg and time of creation.

So, I can not get the bloody image to be $POSTED to the php handling of it.

Anyone with a EXCELLENT idea on how to solve this? he he he

And google has been used for about 4-5 hours now..

BTW.. I am not tooo experienced programming things like this :p

all help is appreciated, Thanks!