Bunch of Handler Functions and Attach
Added on -2019-09-16
| 3 pages
| 1395 words
| 318 views
Trusted by 2+ million users,
1000+ happy students everyday
Showing pages 1 to 1 of 3 pages
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
Found this document preview useful?
You are reading a preview
Upload your documents to download
or
Become a Desklib member to get accesss
Paid Plans
Free Plan
Single Unlock
Monthly Plan
Yearly Plan