input text and image upload in ajax

[claro]

Greetings!

I have here snippets that upload image. Upload is successful, and what I want to do now is to send Id so that I can save it in my db.

<?php $id = $_GET['id'];?>

<script>
$(function(){
		var btnUpload=$('#me');\
		var mestatus=$('#mestatus');
		var files=$('#files');
		new AjaxUpload(btnUpload, {
			action: 'stud_image_act.php',
			name: 'uploadfile',
			onSubmit: function(file, ext){
				 if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){ 
                    // extension is not allowed 
					mestatus.text('Only JPG, PNG or GIF files are allowed');
					return false;
				}
				mestatus.html('<img src="../images/ajax-loader.gif" height="16" width="16">');
			},
			onComplete: function(file, response){
				//On completion clear the status
				mestatus.text('Photo Uploaded Sucessfully!');
				//On completion clear the status
				files.html('');
				//Add uploaded file to list
				if(response==="success"){
					$('<li></li>').appendTo('#files').html('<img src="../upload/student_'+file+'" alt="" height="120" width="130" /><br />').addClass('success');
				} else{
					$('<li></li>').appendTo('#files').text(file).addClass('error');
				}
			}
		});
		
	});
	</script>

My question is, Is there any place in my code to send the value of my $id above?

[sdleihssirhc]

I'm confused. It sounds like you're trying to send a value from JavaScript to PHP, but the only id I saw in your code was already in PHP.

Do you have a value in your JavaScript that you want to save to a database? That's relatively simple, especially with jQuery (which you seem to be using):

// something.php handles the actual "saving to a database" part
$.post('something.php', 'id=' + id);

[claro]

thank you for your response. Here is my php code, I managed already the image to put it in a folder, what I want now is to put it in my database, the problem is I don't know how to send such value to in js.

Here is my html.

<div id="image">
			<div id="flash"></div>
			<div id="ajaxresult"></div>
    				<div id="files"><li class="success"><img src  ='../images/untitled.png'></li></div>
					<div id="me" class="styleall" style=" cursor:pointer;">
						<span style="  font-family:Verdana, Geneva, sans-serif; font-size:10px;">
						<span><input type = 'hidden' name = 'ID' id='ID' value = '<?php echo $id;?>'> </span>
							<span style="cursor:pointer;" >Select image</span>
						</span>
					</div>
					<br/>
					<span id="mestatus" > </span>
					
		</div>

And here is my stud_image_act.php

echo $id = $_GET['ID'];
	
$uploaddir = '../upload/'; 
$file = $uploaddir ."student_".basename($_FILES['uploadfile']['name']); 
$file_name= "student_".$_FILES['uploadfile']['name']; 
 
if (move_uploaded_file($_FILES['uploadfile']['tmp_name'], $file)) 
	{ 
	mysql_query("UPDATE tbl_student 
				    SET stud_Image= '$file_name'  
				  WHERE id = '$id'"	) or die (mysql_error());
	echo "success"; 
	} else {
	echo "error";
	
}

I want to send the value set in my hidden text.

[claro]

see that I have the value of my Id in js and html page. I only need how to send the ID value to save it in my database in stud_image_act.php.

[sdleihssirhc]

That's even easier... I think. All you need to do is:

1. Get the element. It appears to have an id of "ID", so this should be pretty easy.
2. Get its value. Also no big deal with jQuery.
3. Send the value to your PHP page with AJAX. The code you'll want to use isn't very different from what I posted earlier, just simpler:
   
   

   $.get('stud_image_act.php?ID=' + yourId);

[claro]

can I put that any part of my javascript?

[sdleihssirhc]

For the most part. Go ahead and try it, and if it still gives you trouble, come back and ask for more help!

[claro]

I put your suggestion after onComplete: I presume to send the value first before it will display the success message but my function now isn't working.

[sdleihssirhc]

What if you put it at the end of the onSubmit function?

If that doesn't work, can you tell more about the AjaxUpload function? Did you find it somewhere? Did you write it yourself?

[claro]

still no work. I forgot the source, I just copied it. I posted my entire file, html/javascript and php..
I'm have also my external js script
Ajaxfileupload-jquery-1.3.2.js and ajaxupload.3.5.js, I think they all worked well. I really need your help.

[sdleihssirhc]

Try this snippit:

$.get('stud_image_act.php?ID=' + $('#ID').val());

Put it before the "new AjaxUpload" part, not in any of the functions. (I think I found the source of your AjaxUpload, and I'm pretty sure it's a red herring...)

And if that doesn't work, then can you link to a live example?

[claro]

I just followed the suggestion, It works now but still I can't get the value of my ID.

$(function(){
		var btnUpload=$('#me');
		var mestatus=$('#mestatus');
		var files=$('#files');
		$.get('stud_image_act.php?ID=' + $('#ID').val());
		new AjaxUpload(btnUpload, {
			action: 'stud_image_act.php',
			name: 'uploadfile',
			onSubmit: function(file, ext){
				 if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){ 
                    // extension is not allowed 
					mestatus.text('Only JPG, PNG or GIF files are allowed');
					return false;
				}
				mestatus.html('<img src="../images/ajax-loader.gif" height="16" width="16">');
			},
			onComplete: function(file, response){
				//On completion clear the status
				mestatus.text('Photo Uploaded Sucessfully!');
				//On completion clear the status
				files.html('');
				//Add uploaded file to list
				if(response==="success"){
					$('<li></li>').appendTo('#files').html('<img src="../upload/student_'+file+'" alt="" height="120" width="130" /><br />').addClass('success');
				} else{
					$('<li></li>').appendTo('#files').text(file).addClass('error');
				}
			}
		});
		
	});

As much as I want it, I don't have access to view it live. I'm not capable to do it. Do you have other suggestion?

[sdleihssirhc]

It works now but still I can't get the value of my ID.

What does this mean? Is it failing when your JavaScript tries $('#ID').val(), or is it failing when your PHP on stud_image_act.php tries to access $_GET['ID']?

[claro]

I tried the previous suggestion, every time I put this $.get('stud_image_act.php?ID=' + yourId); inside my function, my js fail. Now I tried your recent suggestion, my js works but it missed to send the value of my id. I used echo $_GET['ID'] to fetch and show it's value in stud_image_act.php but it shows nothing.

[sdleihssirhc]

Can you confirm that the ID is actually being written into the hidden input? Using Firefox's Firebug, Chrome's Web Inspector, or IE's Developer Tools?

[claro]

1.png2.png

I attached files to see what I did. Am I doing right? what does it mean? the ID is the actual number I want to get.

[sdleihssirhc]

I meant inspect the DOM element to make sure that the value is being set correctly. This is what it would like in Chrome:

a.png

[claro]

I can't see your attachment. Can you attach it again or you may send it clarosantiago2011@gmail.com..

[claro]

3.png

I have installed Firefox webdeveloper DOM inspector and here's what I've got. Am I near?

[sdleihssirhc]

Not sure if you were ever able to see it, but in case you didn't, I uploaded my attachment to imgur.

However, it looks like you're on the right track with that DOM inspector. Just find your hidden <input> in the body, and verify that it actually has the value that you tried to set.

Off Topic:


Here's why we're doing all this: You're trying to (a) set the value of a hidden <input> with PHP, (b) grab that input's value with JavaScript, and (c) send it to another page in an AJAX request, where it can (d) be processed.

As you already posted, (d) seems to be working fine. There aren't a whole lot of moving parts in (b) or (c); we're letting jQuery take care of them for us. That just leaves (a)...

[claro]

I tried to echo the value of my ID (assuming I've got the value ) it seems like there's no place to echo it in my page, I am thinking to append my ID value to the result message ''Photo uploaded successfully" how can I do that? I tried also to append my ID value in the name of my photo

$id  = $_GET['ID'];

$uploaddir = '../upload/'; 
$file = $uploaddir ."student_".basename($_FILES['uploadfile']['name']); 
$file_name = "student_".$id."_".$_FILES['uploadfile']['name'];

but it doesnt change.
I think I should have tried to find another work around in my js.

[sdleihssirhc]

Just so we're on the same page, here's my understanding of what happens:

1. The user goes to a page on your website (let's call it "Page A").
2. On this page, they upload a file.
3. You have that AjaxUpload script that starts the upload immediately.
4. The file is uploaded to "stud_image_act.php" (let's call this "Page B"), which validates the file and (if it's okay) moves it to the appropriate folder.
5. Note: The user never actually visits Page B; this is all done with AJAX while the user waits patiently at Page A.
6. After the file upload is completed, Page B generates an ID for the file.
7. You now want to add this ID to the database.

Does that sound right?

If yes, then your PHP already has the ID, and can add it to the database; there's no need to get JavaScript involved at all.

[claro]

You got it all friend, that is exactly my problem now. I tried all things I know to find out the real issue. And you got it all right. Perhaps I need to make sure that I've got already the value of my ID. This is the way I save my ID in DB.

echo $id = $_GET['ID'];
	
$uploaddir = '../upload/'; 
$file = $uploaddir ."student_".basename($_FILES['uploadfile']['name']); 
$file_name = "student_".$id."_".$_FILES['uploadfile']['name']; 
 
if (move_uploaded_file($_FILES['uploadfile']['tmp_name'], $file)) 
	{ 
	mysql_query("UPDATE tbl_student 
				    SET stud_Image= '$file_name'  
				  WHERE id = '$id'"	) or die (mysql_error());
	echo "success"; 
	} else {
	echo "error";
	
}

[sdleihssirhc]

This is the way I save my ID in DB.

echo $id = $_GET['ID'];
	
$uploaddir = '../upload/'; 
$file = $uploaddir ."student_".basename($_FILES['uploadfile']['name']); 
$file_name = "student_".$id."_".$_FILES['uploadfile']['name']; 
 
if (move_uploaded_file($_FILES['uploadfile']['tmp_name'], $file)) 
	{ 
	mysql_query("UPDATE tbl_student 
				    SET stud_Image= '$file_name'  
				  WHERE id = '$id'"	) or die (mysql_error());
	echo "success"; 
	} else {
	echo "error";
	
}

Where is the ID coming from? How are you generating it?

[claro]

the original value of ID came from my other page then I sent it to my stud_image.php. I am sure that the value is in the page because I can echo it. Since the processing is in the stud_image_act.php I tend to hide it hidden text to send it to my action via ajax. In that sense I can save it to my database now.