CODEWITHSUNDEEP
javascriptphphtml
Rafael Lopes
Rafael Lopes

Reputation: 63

Upload Image and stay on page

I'm bulding a website that allows users to upload a picture and then get the EXIF info shown in a user-friendly way.

I also want to make available an option for users to be able to share their picture online.

At the moment I already have the JavaScript for the image preview fully working, I select an Image on a Form and it appears on the website...

I also have the upload part of the code working as well (PHP). The image gets uploaded to a folder and the name and path of the respective image get uploaded to the MySQL database.

The thing is... I want the process to happen in this way:

  1. User selects the picture - WORKING

  2. The picture appears on display as a preview - WORKING

  3. User presses the upload button (if he wishes to) - WORKING

  4. The image gets uploaded to the defined folder and the name and path to the DB - WORKING

  5. Website stays on the same page with the image preview still there... - TO BE DONE

  6. A new text-area appears on the website with the image path inside (gotten from the database) so the user can share the image - TO BE DONE

----------------//-------------------

I've read some articles and topics on this and supposedly it needs to be done using JQuery in order to work in the way I defined above...

Could you guys clarify if that's true?

---------------//---------------

UPDATE

The solution @Dhanushka sasanka presented worked! I can now upload the picture to the folder and the info to the database and it stays on the page without refreshing!!

Upvotes: 2

Views: 353

Answers (2)

Dhanushka sasanka
Dhanushka sasanka

Reputation: 528

I did this You must use JqueryForm Plugin to do this because In the Form that your "upload" button it must be type="submit" therefore current page will be reload after pressing that "upload" button so you must use this plugin JQuery Form Plugin Go through this one.from this you can uplaod your image without reloading page.

Upvotes: 2

BadPiggie
BadPiggie

Reputation: 6359

Sending data to server in background without refresh/reload/change the current page can be done with javascript AJAX Request.

If you want to pass data to server and stay on the same page, Then Yes you need to use AJAX in Javascript.

But using Jquery is much easy to implement Ajax request and callbacks, So go with jQuery.

Upvotes: 0

Related Questions