logo

Photo Album Client-Rendered Version D

   

Added on  2019-09-16

3 Pages1395 Words318 Views
 | 
 | 
 | 
Digital Business Application – Lab ExercisesJavaScript and AjaxEXERCISE 4: PHOTO ALBUM CLIENT-RENDERED VERSION DPhoto Album Client-Rendered Version DThe next version of the photoalbum adds the ability to upload new photographs to the album. As it happens file uploads are difficult to manage from the client side (it does not seem to be possible to transmit both the file data and the fields of the form at the same time, meaning that two separate Ajax messages are necessary). To accomplish this we will use some ready made code which adds functionality to JQuery.The code and an explanation of it can be found at this site:http://abandon.ie/notebook/simple-file-uploads-using-jquery-ajaxHowever, all the files you need are provided on moodle in the file ajaxupload.zip. Download this file and extract it so that you have a folder called ajaxupload, then put this folder inside the lib folder onthe webserver.As mentioned, this code adds functionality to JQuery. Once you have it installed, there is a new JQuery function called fileupload. This function basically allows us to set up a whole bunch of handler functions and attach them to a form that includes file upload fields.Make a copy of photoalbum-client-rendered-c.html and call it photoalbum-client-rendered-d.html.The first thing we need to add to this version is the upload form and the “Add images” link. To do this, add exactly the same code as was given in PHP & MySQL Exercise 4. However, change theaction attribute of the form from ? to json-photoalbum-upload.php.The next thing we need to do is add a line to import the fileupload javascript. Assuming you have putit in the lib folder as described above, this means adding a script import to the head of the file. Add the following line immediately after the line which imports the JQuery library itself:<script src='lib/ajaxupload/jquery-fileupload.min.js'></script>This makes the fileupload function available for us to use.As mentioned above, the fileupload function allows us to set up handler functions on a given form. The functions we set up actually get used when the form is submitted. We need to set them up ready when the page is loaded, which means inside the $(document).ready function. Change the existing version to that as shown below (new code is bold):Page 1 of 3
Photo Album Client-Rendered Version D_1

End of preview

Want to access all the pages? Upload your documents or become a member.

Related Documents
Photo Album Client-Rendered Version A
|6
|2700
|401

Add click handler to H1 elements
|5
|2014
|387

Client-Side JavaScript User Information Tracking
|5
|2266
|500

Lab Exercises - Digital Business Application
|3
|1334
|288

Database Assignment: PHP and My SQL
|14
|4437
|116