...

View Full Version : Ajax jquery and image upload ;/



MetZ80
03-25-2009, 10:12 PM
Hi..

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


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

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

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


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!

bdl
03-26-2009, 01:42 AM
Due to JavaScript's security model, it's not possible to do a "true" Ajax file upload. You either have to use an iframe element on the page or one of the alternative methods using Flash, e.g. the YUI uploader component (http://developer.yahoo.com/yui/uploader/).

LMGTFY "ajax iframe upload" (http://www.lmgtfy.com/?q=%22ajax%20iframe%20upload%22)

MetZ80
03-26-2009, 10:18 AM
Hi, and thanks for replying..

I figured as much after som intense googling ;)

Still.. I am stuck on how to implement this to my code...

Any help will be greatly appreciated!

-Tom-

EDIT: I am still searching the web, and have found several plugins, however.. My lack of skillz is making it hard for me to implement in my code :( All help on this would be appreciated! Thanks!

amolv
11-01-2010, 12:44 PM
using uplodify jquery pligin will work gr8 here....


http://www.uploadify.com/demos/



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum