PHP and AJAX image upload

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

2

Contributors

4

Replies

19 Hours

Discussion Span

1 Year Ago

Last Updated

6

Views

Question
Answered

himanshu.1691

Newbie Poster

15 posts since Feb 2012

Reputation Points: 10

Solved Threads: 0

Skill Endorsements: 0

1 Year Ago

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/ ).

jkon

Posting Whiz

382 posts since Jan 2009

Reputation Points: 124

Solved Threads: 63

Skill Endorsements: 4

1 Year Ago

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

himanshu.1691

Newbie Poster

15 posts since Feb 2012

Reputation Points: 10

Solved Threads: 0

Skill Endorsements: 0

1 Year Ago

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)

jkon

Posting Whiz

382 posts since Jan 2009

Reputation Points: 124

Solved Threads: 63

Skill Endorsements: 4

1 Year Ago

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

himanshu.1691

Newbie Poster

15 posts since Feb 2012

Reputation Points: 10

Solved Threads: 0

Skill Endorsements: 0

Question Answered as of 1 Year Ago by jkon

PHP and AJAX image upload

This question has already been solved: Start a new discussion instead