SitePoint Sponsor

User Tag List

Results 1 to 25 of 25

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Dec 2011
    Posts
    221
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)

    input text and image upload in ajax

    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.

    Code:
    <?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?

  2. #2
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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):

    Code JavaScript:
    // something.php handles the actual "saving to a database" part
    $.post('something.php', 'id=' + id);
    I'm the web overlord for Graphic Business Systems

  3. #3
    SitePoint Addict
    Join Date
    Dec 2011
    Posts
    221
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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.
    Code:
    <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

    Code:
    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.

  4. #4
    SitePoint Addict
    Join Date
    Dec 2011
    Posts
    221
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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:

      Code JavaScript:
      $.get('stud_image_act.php?ID=' + yourId);
    I'm the web overlord for Graphic Business Systems

  6. #6
    SitePoint Addict
    Join Date
    Dec 2011
    Posts
    221
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    can I put that any part of my javascript?

  7. #7
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    For the most part. Go ahead and try it, and if it still gives you trouble, come back and ask for more help!
    I'm the web overlord for Graphic Business Systems

  8. #8
    SitePoint Addict
    Join Date
    Dec 2011
    Posts
    221
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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.

  9. #9
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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?
    I'm the web overlord for Graphic Business Systems

  10. #10
    SitePoint Addict
    Join Date
    Dec 2011
    Posts
    221
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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.

  11. #11
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Try this snippit:

    Code JavaScript:
    $.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?
    I'm the web overlord for Graphic Business Systems

  12. #12
    SitePoint Addict
    Join Date
    Dec 2011
    Posts
    221
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I just followed the suggestion, It works now but still I can't get the value of my ID.

    Code:
    $(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?

  13. #13
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by claro View Post
    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']?
    I'm the web overlord for Graphic Business Systems

  14. #14
    SitePoint Addict
    Join Date
    Dec 2011
    Posts
    221
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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.

  15. #15
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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?
    I'm the web overlord for Graphic Business Systems

  16. #16
    SitePoint Addict
    Join Date
    Dec 2011
    Posts
    221
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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.

  17. #17
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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
    I'm the web overlord for Graphic Business Systems

  18. #18
    SitePoint Addict
    Join Date
    Dec 2011
    Posts
    221
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I can't see your attachment. Can you attach it again or you may send it clarosantiago2011@gmail.com..

  19. #19
    SitePoint Addict
    Join Date
    Dec 2011
    Posts
    221
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    3.png

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

  20. #20
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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)...
    I'm the web overlord for Graphic Business Systems

  21. #21
    SitePoint Addict
    Join Date
    Dec 2011
    Posts
    221
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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

    Code:
    $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.

  22. #22
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.
    I'm the web overlord for Graphic Business Systems

  23. #23
    SitePoint Addict
    Join Date
    Dec 2011
    Posts
    221
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code:
    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";
    	
    }

  24. #24
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by claro View Post
    This is the way I save my ID in DB.

    Code:
    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?
    I'm the web overlord for Graphic Business Systems


Bookmarks

Posting Permissions

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