1,105,594 Community Members

PHP and AJAX image upload

Member Avatar
himanshu.1691
Newbie Poster
15 posts since Feb 2012
Reputation Points: 0 [?]
Q&As Helped to Solve: 1 [?]
Skill Endorsements: 0 [?]
 
0
 

i have a page for user registration where i a form with a image tag to it.
i want the user to fill the form but as soon as he uploads the image i want the image uploaded to be displayed on the image tag.
Then i want all these form values+image to be stored in the database.
or the form values on database and the image file somewhere on the disk.
i am attaching the screenshot.
I am using MySQl for database. and PHP
here is the page code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<link rel="stylesheet" href="outpass.css" />

</head>

<body>

 <form method="post" action="crt_stu_db.php">

          <div class="box">

            <h1>Outpass </h1>

            <label>

               <span>Full name: </span>

               <input type="text" class="input_text" name="name" id="name" />

            </label>

             <label>

               <span>Branch: </span>

               <input type="text" class="input_text" name="branch" id="branch"/>

            </label>

             <label>

                <span>Student Mobile No: </span>

                <input type="text" class="input_text" name="smobile" id="smobile" />

            </label>
            
            
            
            
             <label>

                <span>Enrollment No: </span>

                <input type="text" class="input_text" name="eno" id="eno" />

            </label>
            
            
            
             <label>

                <span>Hostel No: </span>

                <input type="text" class="input_text" name="hostel" id="hostel" />

            </label>
            
            <label>

                <span>Room No: </span>

                <input type="text" class="input_text" name="room" id="room" />

            </label>
            
            <label>

                <span>Father's/Gardian no: </span>

                <input type="text" class="input_text" name="fmobile" id="fmobile" />

            </label>
            
            
            <label>

                <span>Address: </span>
	
            <textarea class="address" wrap="off" rows='2' cols='2' name="address" > </textarea>              
             </label>
            
            <input name="student_image" style="position:absolute; top:100px; left:700px"  width="150" height="150" type="image" id="student_image" src="200x200.jpg" align="right" />
            <input name="image" id="stu_img" type="file" style="position:absolute;top:250px;left:700px; width:100px;" />
            
            
        </div>
</form>
</body>
</html>
Attachments ajax.png 31.02KB
Member Avatar
jkon
Posting Pro in Training
444 posts since Jan 2009
Reputation Points: 110 [?]
Q&As Helped to Solve: 74 [?]
Skill Endorsements: 6 [?]
 
0
 

Of course what you described is more complicated than the code provided, but this is not the problem, you can’t upload images through a real AJAX (theory sais that you could using techniques in few browsers) , that is the real problem, you could use iframes and javascript form manipulation (e.g. http://www.openjs.com/articles/ajax/ajax_file_upload/ ) on that or the well know SWFUpload (http://swfupload.org/ ).

Member Avatar
himanshu.1691
Newbie Poster
15 posts since Feb 2012
Reputation Points: 0 [?]
Q&As Helped to Solve: 1 [?]
Skill Endorsements: 0 [?]
 
0
 

Of course what you described is more complicated than the code provided, but this is not the problem, you can’t upload images through a real AJAX (theory sais that you could using techniques in few browsers) , that is the real problem, you could use iframes and javascript form manipulation (e.g. http://www.openjs.com/articles/ajax/ajax_file_upload/ ) on that or the well know SWFUpload (http://swfupload.org/ ).

Thanks mate :D
had to use iframe and blah blah....
http://tutorialzine.com/2011/09/html5-file-upload-jquery-php/
can you look at this page plzzz....
it stores the image i upload in a directory with the original image name....
as i am new to php i cant figure out how to change the image name that gets stored in the directory
or
how to store these images in MYSQL instead of that directory
plzz plzz plzz

Member Avatar
jkon
Posting Pro in Training
444 posts since Jan 2009
Reputation Points: 110 [?]
Q&As Helped to Solve: 74 [?]
Skill Endorsements: 6 [?]
 
1
 

I took a look at the script you chosen,
The first thing you are asking is done here ,

move_uploaded_file($pic['tmp_name'], $upload_dir.$pic['name'])

So…
http://php.net/manual/en/function.move-uploaded-file.php
(second argument , destination)
Of course in a quick pick of that script I didn’t shaw anything about security, or maybe there is somewhere on that (you could start from http://php.about.com/od/advancedphp/ss/php_file_upload.htm ).

The second thing you ask (to save the image in a MySql table) you must have reason to do that. I believe that there are really very few cases that this has a meaning , so few that I wouldn’t recommended it at all. If you insist on that you could google about it …
(e.g. http://bytes.com/topic/php/insights/740327-uploading-files-into-mysql-database-using-php)

Member Avatar
himanshu.1691
Newbie Poster
15 posts since Feb 2012
Reputation Points: 0 [?]
Q&As Helped to Solve: 1 [?]
Skill Endorsements: 0 [?]
 
0
 

I took a look at the script you chosen,
The first thing you are asking is done here ,

move_uploaded_file($pic['tmp_name'], $upload_dir.$pic['name'])

So…
http://php.net/manual/en/function.move-uploaded-file.php
(second argument , destination)
Of course in a quick pick of that script I didn’t shaw anything about security, or maybe there is somewhere on that (you could start from http://php.about.com/od/advancedphp/ss/php_file_upload.htm ).

The second thing you ask (to save the image in a MySql table) you must have reason to do that. I believe that there are really very few cases that this has a meaning , so few that I wouldn’t recommended it at all. If you insist on that you could google about it …
(e.g. http://bytes.com/topic/php/insights/740327-uploading-files-into-mysql-database-using-php)

You are Amazing man.....Thanks :D
i wanted to save the images of the student along with the other details..
but now i think i should store it on the disk itself.
I did it finally.
I stored the images according to the ""Enrollment No."" of students.... :D
thanks agan bro :D

Question Answered as of 2 Years Ago by jkon
You
This question has already been solved: Start a new discussion instead
Post:
Start New Discussion
View similar articles that have also been tagged: