Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question 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

    all help is appreciated, Thanks!

  • #2
    bdl
    bdl is offline
    Regular Coder
    Join Date
    Apr 2007
    Location
    Camarillo, CA US
    Posts
    590
    Thanks
    4
    Thanked 83 Times in 82 Posts
    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.

    LMGTFY "ajax iframe upload"

  • #3
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!
    Last edited by MetZ80; 03-26-2009 at 07:50 PM.

  • #4
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    uplodify.js

    using uplodify jquery pligin will work gr8 here....


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


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •