title
File Upload Progress Bar Meter Tutorial HTML5 Ajax PHP

description
Code: https://www.adamkhoury.com/JavaScript/video/File-Upload-Progress-Bar-Meter-Tutorial-Ajax-PHP In this programming lesson you can learn to use HTML5 + JavaScript + PHP to render an elegant file upload progress bar in your file upload forms. It is desirable to render a file upload progress bar when users upload files to your server, much like the way YouTube renders a file upload progress bar every time we upload a video to their network. The programming is not hard even for beginners to understand and the script is relatively short. The new HTML5 progress element has been made specifically for developers to use in scenarios such as this, it automatically matches the specific browser software visually, but you can customize your loading bar graphics for branding or consistency in all the different browsers. Due to the fact that we are using a new HTML5 element, this application may not work as intended in old versions of browser software. Use a modern popular browser software when experimenting with this code.

detail
{'title': 'File Upload Progress Bar Meter Tutorial HTML5 Ajax PHP', 'heatmap': [{'end': 439.399, 'start': 397.639, 'weight': 0.916}, {'end': 979.913, 'start': 958.1, 'weight': 0.746}, {'end': 1199.615, 'start': 1149.363, 'weight': 0.818}], 'summary': 'Tutorial demonstrates using html5, javascript, and php to create file upload progress bars compatible with modern browsers, including a live demo for a 2.8mb video file, setting up html, javascript functions, building ajax requests, and event handling for elegant file upload progress meter creation.', 'chapters': [{'end': 46.855, 'segs': [{'end': 46.855, 'src': 'embed', 'start': 0.57, 'weight': 0, 'content': [{'end': 8.898, 'text': "In this tutorial we'll be showing you how to use HTML5, JavaScript, and PHP to render elegant file upload progress bars.", 'start': 0.57, 'duration': 8.328}, {'end': 17.146, 'text': "Now due to the fact that we're using HTML5, this application may not work as intended in old versions of browser software.", 'start': 9.699, 'duration': 7.447}, {'end': 23.292, 'text': 'So for now just make sure you experiment in either Google Chrome, Firefox, or Internet Explorer.', 'start': 17.607, 'duration': 5.685}, {'end': 25.514, 'text': 'the most modern versions of those.', 'start': 24.013, 'duration': 1.501}, {'end': 32.258, 'text': "And we'll be coding every line of the small script so there'll be no need for any bulky third-party code libraries or frameworks.", 'start': 25.734, 'duration': 6.524}, {'end': 37.962, 'text': "This way, you'll have a better understanding of how the application works at its core and it'll be much,", 'start': 32.659, 'duration': 5.303}, {'end': 42.025, 'text': 'much easier for you to manage and customize it down the road.', 'start': 37.962, 'duration': 4.063}, {'end': 46.855, 'text': "First, let's take a look at the finished product of the lesson,", 'start': 43.752, 'duration': 3.103}], 'summary': 'Tutorial on creating elegant file upload progress bars using html5, javascript, and php. works best in modern browsers.', 'duration': 46.285, 'max_score': 0.57, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/EraNFJiY0Eg/pics/EraNFJiY0Eg570.jpg'}], 'start': 0.57, 'title': 'Html5 file upload progress bars', 'summary': 'Demonstrates how to use html5, javascript, and php to render file upload progress bars, ensuring compatibility with modern browsers such as google chrome, firefox, and internet explorer.', 'chapters': [{'end': 46.855, 'start': 0.57, 'title': 'Html5 file upload progress bars', 'summary': 'Demonstrates how to use html5, javascript, and php to render file upload progress bars, with an emphasis on coding every line of the script and compatibility with modern browsers such as google chrome, firefox, and internet explorer.', 'duration': 46.285, 'highlights': ['The tutorial covers the use of HTML5, JavaScript, and PHP to create file upload progress bars, focusing on coding every line of the script for better understanding and easier customization.', 'The application may not work as intended in old versions of browser software, thus it is recommended to experiment in modern versions of Google Chrome, Firefox, or Internet Explorer.', 'Emphasis is placed on avoiding bulky third-party code libraries or frameworks, enabling better management and customization of the application down the road.']}], 'duration': 46.285, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/EraNFJiY0Eg/pics/EraNFJiY0Eg570.jpg', 'highlights': ['The tutorial covers the use of HTML5, JavaScript, and PHP to create file upload progress bars, focusing on coding every line of the script for better understanding and easier customization.', 'Emphasis is placed on avoiding bulky third-party code libraries or frameworks, enabling better management and customization of the application down the road.', 'The application may not work as intended in old versions of browser software, thus it is recommended to experiment in modern versions of Google Chrome, Firefox, or Internet Explorer.']}, {'end': 397.639, 'segs': [{'end': 73.755, 'src': 'embed', 'start': 46.855, 'weight': 0, 'content': [{'end': 52.559, 'text': 'so you can evaluate whether or not your applications might benefit from having file upload progress meters.', 'start': 46.855, 'duration': 5.704}, {'end': 56.563, 'text': 'And this little demo is running live on my server right now, online.', 'start': 52.94, 'duration': 3.623}, {'end': 62.988, 'text': "So what I'll do right now is browse my computer for a video file and make sure it's one that's over one megabyte at least.", 'start': 56.803, 'duration': 6.185}, {'end': 67.712, 'text': "That way we can see some progress loading into the bar and it doesn't load so super fast.", 'start': 63.308, 'duration': 4.404}, {'end': 73.755, 'text': 'So I browsed my computer and I chose tomandjerry.mp4 which is a video file that was sitting on my desktop.', 'start': 68.032, 'duration': 5.723}], 'summary': 'Demo showing file upload progress meter for video file over 1mb', 'duration': 26.9, 'max_score': 46.855, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/EraNFJiY0Eg/pics/EraNFJiY0Eg46855.jpg'}, {'end': 142.047, 'src': 'embed', 'start': 93.437, 'weight': 1, 'content': [{'end': 98.579, 'text': 'And this bar, this nice green bar here, shows the exact percentage as well.', 'start': 93.437, 'duration': 5.142}, {'end': 109.203, 'text': 'Now down at the very bottom, I put in an extra line that shows how much of the file bytes have loaded in and the total bytes of the file size.', 'start': 99.239, 'duration': 9.964}, {'end': 119.84, 'text': 'So as the developer, you can see how much of the file has loaded in, exactly how many bytes, and the total amount of bytes.', 'start': 111.738, 'duration': 8.102}, {'end': 126.042, 'text': 'And when the upload is complete, we have the application render out a message that comes back to the AJAX request.', 'start': 120.12, 'duration': 5.922}, {'end': 129.663, 'text': 'So this file is actually being uploaded using AJAX.', 'start': 126.382, 'duration': 3.281}, {'end': 133.744, 'text': 'And this message right here is an echo from PHP.', 'start': 130.062, 'duration': 3.682}, {'end': 138.506, 'text': "Alright let's begin with the bare bones of an HTML5 web document.", 'start': 134.924, 'duration': 3.582}, {'end': 142.047, 'text': 'This way we can all see the production of this application from scratch.', 'start': 138.946, 'duration': 3.101}], 'summary': 'The transcript discusses tracking file upload progress and display of ajax response and php echo during the process.', 'duration': 48.61, 'max_score': 93.437, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/EraNFJiY0Eg/pics/EraNFJiY0Eg93437.jpg'}, {'end': 247.864, 'src': 'embed', 'start': 222.767, 'weight': 4, 'content': [{'end': 228.653, 'text': "Okay, now, inside of the form, we're going to have an input element with a type of file,", 'start': 222.767, 'duration': 5.886}, {'end': 233.077, 'text': 'and this is what gives your user the little browse for file button.', 'start': 228.653, 'duration': 4.424}, {'end': 236.08, 'text': "It's what allows them to browse their computer and select a file.", 'start': 233.277, 'duration': 2.803}, {'end': 240.642, 'text': "And we'll give this a name attribute that's equal to something simple like file1.", 'start': 236.28, 'duration': 4.362}, {'end': 244.343, 'text': "And we'll also give it an ID attribute of the same value.", 'start': 240.822, 'duration': 3.521}, {'end': 246.104, 'text': "And we'll close that input element.", 'start': 244.363, 'duration': 1.741}, {'end': 247.864, 'text': "And we'll just put a break tag there.", 'start': 246.244, 'duration': 1.62}], 'summary': 'Creating an input element of type file for user to browse and select a file.', 'duration': 25.097, 'max_score': 222.767, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/EraNFJiY0Eg/pics/EraNFJiY0Eg222767.jpg'}, {'end': 336.375, 'src': 'embed', 'start': 309.32, 'weight': 5, 'content': [{'end': 313.043, 'text': 'Put in the opening tag and the closing tag for that progress element.', 'start': 309.32, 'duration': 3.723}, {'end': 317.205, 'text': "Now we'll give this an ID of progress bar.", 'start': 313.463, 'duration': 3.742}, {'end': 320.507, 'text': "We'll make the starting value 0.", 'start': 317.625, 'duration': 2.882}, {'end': 323.669, 'text': "And we'll make the max attribute 100.", 'start': 320.507, 'duration': 3.162}, {'end': 325.83, 'text': 'That way it has a range from 0 to 100.', 'start': 323.669, 'duration': 2.161}, {'end': 330.733, 'text': "And I'm just going to put a style attribute in there to make it a width 100.", 'start': 325.83, 'duration': 4.903}, {'end': 331.754, 'text': 'of whatever I want.', 'start': 330.733, 'duration': 1.021}, {'end': 334.735, 'text': 'So you can customize the width of that progress bar.', 'start': 331.894, 'duration': 2.841}, {'end': 336.375, 'text': "I'll put it 300 pixels.", 'start': 335.115, 'duration': 1.26}], 'summary': "Create a progress bar with id 'progress bar', starting value 0, and max attribute 100. customize width to 300 pixels.", 'duration': 27.055, 'max_score': 309.32, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/EraNFJiY0Eg/pics/EraNFJiY0Eg309320.jpg'}], 'start': 46.855, 'title': 'Html5 file upload and progress', 'summary': 'Covers a live file upload progress demo for a 2.8 megabyte video file, and a tutorial on creating an html5 file upload form using ajax and php, including form structure and javascript functions.', 'chapters': [{'end': 119.84, 'start': 46.855, 'title': 'File upload progress demo', 'summary': 'Demonstrates a live file upload progress demo, showcasing the upload of a 2.8 megabyte video file with a real-time progress bar and exact byte count for developers.', 'duration': 72.985, 'highlights': ['The demo showcases the live upload of a 2.8 megabyte video file with a real-time progress bar, providing developers with insight into file upload progress.', 'The developer can see the exact percentage and byte count of the file that has been uploaded to the server, aiding in evaluating the benefits of file upload progress meters.', 'The demo enables developers to assess the file upload progress with specific byte details, enhancing their understanding of the upload process.']}, {'end': 397.639, 'start': 120.12, 'title': 'Html5 file upload tutorial', 'summary': 'Provides a tutorial for creating an html5 file upload form using ajax and php, including the structure of the html document, form elements, and the progress bar with javascript functions.', 'duration': 277.519, 'highlights': ['The chapter discusses creating an HTML5 file upload form using AJAX and PHP, including the structure of the HTML document and form elements.', 'The tutorial covers the usage of the input element for browsing and selecting a file, along with a button for initiating the upload.', 'The process of adding the HTML5 progress element with customizable attributes, including ID, starting value, and max attribute, is detailed.']}], 'duration': 350.784, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/EraNFJiY0Eg/pics/EraNFJiY0Eg46855.jpg', 'highlights': ['The demo showcases the live upload of a 2.8 megabyte video file with a real-time progress bar, providing developers with insight into file upload progress.', 'The developer can see the exact percentage and byte count of the file that has been uploaded to the server, aiding in evaluating the benefits of file upload progress meters.', 'The demo enables developers to assess the file upload progress with specific byte details, enhancing their understanding of the upload process.', 'The chapter discusses creating an HTML5 file upload form using AJAX and PHP, including the structure of the HTML document and form elements.', 'The tutorial covers the usage of the input element for browsing and selecting a file, along with a button for initiating the upload.', 'The process of adding the HTML5 progress element with customizable attributes, including ID, starting value, and max attribute, is detailed.']}, {'end': 607.92, 'segs': [{'end': 463.279, 'src': 'heatmap', 'start': 397.639, 'weight': 1, 'content': [{'end': 401.181, 'text': "so that's all of the HTML that our application will require for now.", 'start': 397.639, 'duration': 3.542}, {'end': 403.942, 'text': 'Now we can work on the JavaScript portion.', 'start': 401.781, 'duration': 2.161}, {'end': 414.704, 'text': "Now first I'm going to pop in a function that's simply going to allow me to not use document.getElementById a whole lot of times in my application.", 'start': 403.962, 'duration': 10.742}, {'end': 417.945, 'text': "Since I don't want to use that over and over and over again,", 'start': 415.084, 'duration': 2.861}, {'end': 423.526, 'text': "I can just write a small function that returns that and all I'll have to use is an underscore.", 'start': 417.945, 'duration': 5.581}, {'end': 427.949, 'text': 'to get any element by its id on the page.', 'start': 424.306, 'duration': 3.643}, {'end': 434.775, 'text': "if you've ever used jquery before, they'll use a dollar sign here and that way in your applications,", 'start': 427.949, 'duration': 6.826}, {'end': 439.399, 'text': 'all you have to do is put dollar sign and then refer to the element that you want.', 'start': 434.775, 'duration': 4.624}, {'end': 440.78, 'text': "i'm just going to use an underscore.", 'start': 439.399, 'duration': 1.381}, {'end': 442.122, 'text': 'that way nobody gets confused.', 'start': 440.78, 'duration': 1.342}, {'end': 448.427, 'text': 'So all this function does is set up to return the document.getElementById.', 'start': 442.662, 'duration': 5.765}, {'end': 452.11, 'text': "object reference for whatever element that you're targeting on the page.", 'start': 448.427, 'duration': 3.683}, {'end': 459.095, 'text': "It's simply a way to avoid writing document.getElementById many, many times in your application.", 'start': 452.51, 'duration': 6.585}, {'end': 463.279, 'text': 'Now, the next thing we need in our JavaScript is this uploadFile function.', 'start': 459.436, 'duration': 3.843}], 'summary': 'Html code completed; javascript work begins with functions for easy element access and file upload.', 'duration': 65.64, 'max_score': 397.639, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/EraNFJiY0Eg/pics/EraNFJiY0Eg397639.jpg'}, {'end': 505.436, 'src': 'embed', 'start': 481.527, 'weight': 0, 'content': [{'end': 488.068, 'text': 'Now the first thing we have to do in that upload file function is target the file that is to be uploaded.', 'start': 481.527, 'duration': 6.541}, {'end': 492.009, 'text': "So we're going to need a variable name and we'll just name it file.", 'start': 488.088, 'duration': 3.921}, {'end': 497.27, 'text': "And we'll make that variable equal to document.getElementById.", 'start': 492.489, 'duration': 4.781}, {'end': 502.273, 'text': 'And the ID we want to target is file1, right here.', 'start': 497.99, 'duration': 4.283}, {'end': 505.436, 'text': "And we're going to access its files array.", 'start': 502.293, 'duration': 3.143}], 'summary': 'Creating a file upload function targeting file1 id and accessing its files array.', 'duration': 23.909, 'max_score': 481.527, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/EraNFJiY0Eg/pics/EraNFJiY0Eg481527.jpg'}, {'end': 569.212, 'src': 'embed', 'start': 547.413, 'weight': 4, 'content': [{'end': 556.903, 'text': "So, in your JavaScript side of your application, before this file is sent to PHP for upload, you have access to the file's name, size and type.", 'start': 547.413, 'duration': 9.49}, {'end': 559.066, 'text': 'if you need to evaluate those things for your form,', 'start': 556.903, 'duration': 2.163}, {'end': 560.867, 'text': "But I'll just leave that commented out.", 'start': 559.346, 'duration': 1.521}, {'end': 566.43, 'text': 'You guys might want to uncomment it and let it run first couple of times that you run your application.', 'start': 561.527, 'duration': 4.903}, {'end': 569.212, 'text': "And that's just there for developer purposes as well.", 'start': 566.85, 'duration': 2.362}], 'summary': "Javascript side can access file's name, size, and type before upload to php.", 'duration': 21.799, 'max_score': 547.413, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/EraNFJiY0Eg/pics/EraNFJiY0Eg547413.jpg'}], 'start': 397.639, 'title': 'Html and javascript functions', 'summary': 'Covers setting up html and introducing a javascript function to simplify element retrieval, and details the creation of a function to target elements and the process of uploading files using javascript.', 'chapters': [{'end': 442.122, 'start': 397.639, 'title': 'Html and javascript overview', 'summary': 'Covers setting up html for the application and introduces a javascript function to simplify element retrieval, reducing the need for repetitive document.getelementbyid calls.', 'duration': 44.483, 'highlights': ['The chapter covers setting up HTML for the application', 'Introduces a JavaScript function to simplify element retrieval']}, {'end': 607.92, 'start': 442.662, 'title': 'Javascript function and file upload process', 'summary': 'Details the creation of a function to target elements and the process of uploading files using javascript, including accessing file details and creating form data for ajax requests.', 'duration': 165.258, 'highlights': ['The function simplifies targeting elements by returning the document.getElementById object reference, reducing repetition in the application.', 'The process of creating the uploadFile function for handling file upload events is detailed, providing an understanding of targeting the file to be uploaded and accessing its details.', 'The importance of accessing file details such as name, size, and type before the upload button is pressed is emphasized, providing insight into evaluating these details for form purposes in the application.']}], 'duration': 210.281, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/EraNFJiY0Eg/pics/EraNFJiY0Eg397639.jpg', 'highlights': ['The process of creating the uploadFile function for handling file upload events is detailed, providing an understanding of targeting the file to be uploaded and accessing its details.', 'The function simplifies targeting elements by returning the document.getElementById object reference, reducing repetition in the application.', 'The chapter covers setting up HTML for the application', 'Introduces a JavaScript function to simplify element retrieval', 'The importance of accessing file details such as name, size, and type before the upload button is pressed is emphasized, providing insight into evaluating these details for form purposes in the application.']}, {'end': 849.432, 'segs': [{'end': 655.406, 'src': 'embed', 'start': 607.92, 'weight': 0, 'content': [{'end': 614.982, 'text': 'and this form data instance is going to be sent through our ajax request when we use the send method.', 'start': 607.92, 'duration': 7.062}, {'end': 616.883, 'text': "so now let's build that ajax request.", 'start': 614.982, 'duration': 1.901}, {'end': 622.285, 'text': "we're going to say var ajax equal to new xml http request.", 'start': 616.883, 'duration': 5.402}, {'end': 631.018, 'text': 'Now, since the whole point of this application is to have a file upload progress bar,', 'start': 623.596, 'duration': 7.422}, {'end': 635.839, 'text': "we're going to have to have some event listeners added to this AJAX instance.", 'start': 631.018, 'duration': 4.821}, {'end': 641.9, 'text': "Because we want to listen for the progress event, we want to listen for the complete event when it's done.", 'start': 636.079, 'duration': 5.821}, {'end': 645.28, 'text': "We're also going to listen for the error event and the abort event.", 'start': 642.28, 'duration': 3}, {'end': 647.441, 'text': "So let's pop those lines into place right now.", 'start': 645.481, 'duration': 1.96}, {'end': 655.406, 'text': "you can see, we're taking the ajax object instance and we're adding event listeners to it, and this first event, listener, is progress.", 'start': 647.941, 'duration': 7.465}], 'summary': 'Building an ajax request with event listeners for file upload progress.', 'duration': 47.486, 'max_score': 607.92, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/EraNFJiY0Eg/pics/EraNFJiY0Eg607920.jpg'}, {'end': 694.292, 'src': 'embed', 'start': 673.437, 'weight': 1, 'content': [{'end': 682.984, 'text': "for this upload, a progress handler function is going to be called every time that there's new progress of upload to the server.", 'start': 673.437, 'duration': 9.547}, {'end': 688.508, 'text': 'so every time more bytes are uploaded to the server, the progress event is going to be called to run,', 'start': 682.984, 'duration': 5.524}, {'end': 694.292, 'text': 'or the progress handler function is going to be called to run by the progress event listener.', 'start': 688.508, 'duration': 5.784}], 'summary': 'Progress handler function called for each upload progress', 'duration': 20.855, 'max_score': 673.437, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/EraNFJiY0Eg/pics/EraNFJiY0Eg673437.jpg'}, {'end': 776.532, 'src': 'embed', 'start': 753.31, 'weight': 3, 'content': [{'end': 760.376, 'text': "so we put that in place just to make sure that we can evaluate the progress of the upload while it's uploading.", 'start': 753.31, 'duration': 7.066}, {'end': 760.657, 'text': 'all right.', 'start': 760.376, 'duration': 0.281}, {'end': 765.502, 'text': 'so now the very next thing we need for the Ajax request is to run the open method.', 'start': 760.657, 'duration': 4.845}, {'end': 767.745, 'text': 'now the open method gets two parameters.', 'start': 765.502, 'duration': 2.243}, {'end': 776.532, 'text': 'the first parameter is going to be the method which is post, and then the next parameter is simply the URL of your parsing file.', 'start': 767.745, 'duration': 8.787}], 'summary': 'Implementing progress evaluation for upload and configuring ajax request for parsing file.', 'duration': 23.222, 'max_score': 753.31, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/EraNFJiY0Eg/pics/EraNFJiY0Eg753310.jpg'}], 'start': 607.92, 'title': 'File upload ajax request', 'summary': 'Discusses building an ajax request for file upload, including event listeners for progress, complete, error, and abort events, and writing functions for corresponding handlers.', 'chapters': [{'end': 849.432, 'start': 607.92, 'title': 'File upload ajax request', 'summary': 'Discusses building an ajax request for file upload, including adding event listeners for progress, complete, error, and abort events, as well as writing functions for progress handler, complete handler, error handler, and abort handler.', 'duration': 241.512, 'highlights': ['Adding event listeners for progress, complete, error, and abort events', 'Importance of progress handler function for monitoring server updates', 'Execution of ajax.send method to initiate the AJAX request', "Utilizing the open method with 'post' as the method and the URL of the parsing file"]}], 'duration': 241.512, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/EraNFJiY0Eg/pics/EraNFJiY0Eg607920.jpg', 'highlights': ['Adding event listeners for progress, complete, error, and abort events', 'Importance of progress handler function for monitoring server updates', 'Execution of ajax.send method to initiate the AJAX request', "Utilizing the open method with 'post' as the method and the URL of the parsing file"]}, {'end': 1478.187, 'segs': [{'end': 916.189, 'src': 'embed', 'start': 874.264, 'weight': 5, 'content': [{'end': 876.225, 'text': "And it doesn't matter any way you want to write it.", 'start': 874.264, 'duration': 1.961}, {'end': 878.925, 'text': 'It can be this if you want.', 'start': 876.565, 'duration': 2.36}, {'end': 880.086, 'text': "It doesn't even matter.", 'start': 879.206, 'duration': 0.88}, {'end': 883.246, 'text': "But as long as you're referencing that event.", 'start': 880.486, 'duration': 2.76}, {'end': 886.507, 'text': "And I'm just going to write out event because that's what it is.", 'start': 883.627, 'duration': 2.88}, {'end': 889.588, 'text': 'But keep in mind that you might see this written as EVT.', 'start': 886.687, 'duration': 2.901}, {'end': 892.869, 'text': 'And remember in ActionScript we used to write just E.', 'start': 890.208, 'duration': 2.661}, {'end': 895.291, 'text': 'to reference events.', 'start': 893.809, 'duration': 1.482}, {'end': 903.059, 'text': "remember so, whether you see it as e, whether you see it as evt or whether you see it fully written as event, it'll work either way.", 'start': 895.291, 'duration': 7.768}, {'end': 908.685, 'text': "like that, we're just scooping up the event reference as an argument through this function.", 'start': 903.059, 'duration': 5.626}, {'end': 911.188, 'text': 'that way we can access the event within the function.', 'start': 908.685, 'duration': 2.503}, {'end': 916.189, 'text': "Now, first thing we'll do within that function is say document.getElementById,", 'start': 911.508, 'duration': 4.681}], 'summary': 'Different ways to reference events in code, e.g. event, evt, or event, all work interchangeably.', 'duration': 41.925, 'max_score': 874.264, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/EraNFJiY0Eg/pics/EraNFJiY0Eg874264.jpg'}, {'end': 980.373, 'src': 'heatmap', 'start': 940.883, 'weight': 0, 'content': [{'end': 945.368, 'text': "So once we target that paragraph element we'll target its inner HTML property.", 'start': 940.883, 'duration': 4.485}, {'end': 951.455, 'text': "We're going to make that equal to the string of uploaded bytes of total bytes.", 'start': 945.388, 'duration': 6.067}, {'end': 957.76, 'text': "So you'll see how many loaded bytes have progressed and how many total bytes you have.", 'start': 952.136, 'duration': 5.624}, {'end': 963.444, 'text': "We're also going to use event.loaded and event.total to get the percentage right now.", 'start': 958.1, 'duration': 5.344}, {'end': 970.909, 'text': "So let's type in var percent is equal to event.loaded divided by event.total.", 'start': 963.864, 'duration': 7.045}, {'end': 975.231, 'text': "and we're gonna multiply that by a hundred.", 'start': 972.93, 'duration': 2.301}, {'end': 979.913, 'text': "that way we don't get a decimal value and we get a correct percentage number that we're looking for.", 'start': 975.231, 'duration': 4.682}, {'end': 980.373, 'text': "it's just.", 'start': 979.913, 'duration': 0.46}], 'summary': "Target paragraph element's inner html property to display uploaded bytes and total bytes progress. calculate percentage using event.loaded and event.total.", 'duration': 39.49, 'max_score': 940.883, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/EraNFJiY0Eg/pics/EraNFJiY0Eg940883.jpg'}, {'end': 1082.492, 'src': 'embed', 'start': 1058.175, 'weight': 2, 'content': [{'end': 1065.022, 'text': 'now we can remove this line from the bottom and the only line we want to keep in there is the progress bar value.', 'start': 1058.175, 'duration': 6.847}, {'end': 1068.884, 'text': 'we want to make that zero after the upload is complete.', 'start': 1065.022, 'duration': 3.862}, {'end': 1072.526, 'text': 'now this complete handler function is the function that fires off.', 'start': 1068.884, 'duration': 3.642}, {'end': 1078.089, 'text': 'when PHP echoes back, the upload is complete to the AJAX request.', 'start': 1072.526, 'duration': 5.563}, {'end': 1082.492, 'text': 'so when PHP echoes back, the upload is complete to the AJAX request.', 'start': 1078.089, 'duration': 4.403}], 'summary': 'The progress bar value should be zero after upload is complete.', 'duration': 24.317, 'max_score': 1058.175, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/EraNFJiY0Eg/pics/EraNFJiY0Eg1058175.jpg'}, {'end': 1199.615, 'src': 'heatmap', 'start': 1149.363, 'weight': 0.818, 'content': [{'end': 1154.804, 'text': "We'll name that function abort handler and in the status we'll put upload aborted.", 'start': 1149.363, 'duration': 5.441}, {'end': 1160.766, 'text': "Now we have all four of our event listener functions in place and that's it for the JavaScript.", 'start': 1155.185, 'duration': 5.581}, {'end': 1168.29, 'text': 'Now all we need to do is write our file upload parser.php, which is simply going to be a script that uploads,', 'start': 1161.166, 'duration': 7.124}, {'end': 1174.697, 'text': 'it moves the uploaded file to the server and then it will echo back to this Ajax request, some kind of message.', 'start': 1168.29, 'duration': 6.407}, {'end': 1177.721, 'text': 'Okay, so you can see,', 'start': 1176.84, 'duration': 0.881}, {'end': 1187.307, 'text': 'file upload parser is made very basic for this demonstration and you would want to expand it with more error handling and checking of the file size,', 'start': 1177.721, 'duration': 9.586}, {'end': 1190.069, 'text': "the type and to make sure it's there, and things like that.", 'start': 1187.307, 'duration': 2.762}, {'end': 1195.312, 'text': 'The only error handling I put in place was to check and see if the file was browsed for,', 'start': 1190.109, 'duration': 5.203}, {'end': 1199.615, 'text': "just to see if it's there before we run the move uploaded file function on it.", 'start': 1195.312, 'duration': 4.303}], 'summary': 'Javascript functions added; php file upload script created with basic error handling.', 'duration': 50.252, 'max_score': 1149.363, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/EraNFJiY0Eg/pics/EraNFJiY0Eg1149363.jpg'}, {'end': 1292.27, 'src': 'embed', 'start': 1262.122, 'weight': 1, 'content': [{'end': 1265.983, 'text': 'please browse for a file before clicking the upload button and we exit the script.', 'start': 1262.122, 'duration': 3.861}, {'end': 1273.245, 'text': "If the file is in the PHP temp folder and it's ready to be moved, we just run the move uploaded file function.", 'start': 1266.403, 'duration': 6.842}, {'end': 1280.947, 'text': "So all I did was I put if move uploaded file function executes correctly, then we're going to echo back to the ajax request.", 'start': 1273.445, 'duration': 7.502}, {'end': 1281.868, 'text': 'file name.', 'start': 1280.947, 'duration': 0.921}, {'end': 1286.289, 'text': 'upload is complete, because at that point everything is successful.', 'start': 1281.868, 'duration': 4.421}, {'end': 1292.27, 'text': "else, if the move uploaded file function does not execute correctly, then we're going to echo back to the ajax request.", 'start': 1286.289, 'duration': 5.981}], 'summary': 'Check file, move and echo success/error in php upload process.', 'duration': 30.148, 'max_score': 1262.122, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/EraNFJiY0Eg/pics/EraNFJiY0Eg1262122.jpg'}, {'end': 1467.078, 'src': 'embed', 'start': 1440.197, 'weight': 3, 'content': [{'end': 1447.485, 'text': "It's a new modern thing we have to use on the web and it was made for exactly this purpose or things similar to this.", 'start': 1440.197, 'duration': 7.288}, {'end': 1449.987, 'text': "But keep in mind that you don't have to use that.", 'start': 1447.785, 'duration': 2.202}, {'end': 1452.71, 'text': 'You can use any custom graphics that you want.', 'start': 1450.488, 'duration': 2.222}, {'end': 1462.014, 'text': 'Okay so that shows you how to use HTML5, JavaScript and PHP to render elegant file upload progress meters.', 'start': 1454.588, 'duration': 7.426}, {'end': 1467.078, 'text': 'And all the programming that you need to be able to customize this thing for your future applications.', 'start': 1462.534, 'duration': 4.544}], 'summary': 'Html5, javascript, and php can render elegant file upload progress meters for future applications.', 'duration': 26.881, 'max_score': 1440.197, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/EraNFJiY0Eg/pics/EraNFJiY0Eg1440197.jpg'}], 'start': 849.432, 'title': 'Event handling in javascript and file upload progress', 'summary': 'Covers event handling in javascript, focusing on accessing event references within functions, and creating an elegant file upload progress meter using html5, javascript, and php, with a focus on targeting elements, calculating percentage, handling events, and creating a basic file upload parser. it also highlights the flexibility to use custom graphics for progress indication.', 'chapters': [{'end': 916.189, 'start': 849.432, 'title': 'Event handling in javascript', 'summary': 'Explains event handling in javascript, emphasizing the process of snatching up event reference in the arguments area of the function and accessing the event within the function.', 'duration': 66.757, 'highlights': ['Explaining the process of snatching up event reference in the arguments area of the function and accessing the event within the function.', 'Emphasizing that the event reference can be written as event, EVT, or E, and it will work in any form.']}, {'end': 1478.187, 'start': 916.189, 'title': 'File upload progress with html5, javascript, and php', 'summary': 'Explains how to use html5, javascript, and php to create an elegant file upload progress meter, including targeting elements, calculating percentage, handling events, and creating a basic file upload parser. it also emphasizes the flexibility to use custom graphics for progress indication.', 'duration': 561.998, 'highlights': ['The new HTML5 progress bar is used to display the loaded and total bytes of the file being uploaded, providing a visual indication of the progress.', 'The JavaScript function calculates the percentage of the file uploaded by dividing the loaded bytes by the total bytes and multiplying by 100 to obtain a whole number percentage.', 'The complete handler function fires when the upload is complete or when an error event is echoed back from the PHP file to the AJAX request, providing a comprehensive handling of upload completion and errors.', "The file upload parser PHP script handles the file upload process by checking for the file's presence in the temp folder, moving the file to the server, and echoing back relevant messages to the AJAX request, demonstrating the fundamental process of handling file uploads in PHP.", 'The tutorial emphasizes the flexibility to use custom graphics or elements other than the HTML5 progress bar for indicating file upload progress, encouraging creativity and customization in rendering progress meters.']}], 'duration': 628.755, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/EraNFJiY0Eg/pics/EraNFJiY0Eg849432.jpg', 'highlights': ['The JavaScript function calculates the percentage of the file uploaded by dividing the loaded bytes by the total bytes and multiplying by 100 to obtain a whole number percentage.', "The file upload parser PHP script handles the file upload process by checking for the file's presence in the temp folder, moving the file to the server, and echoing back relevant messages to the AJAX request, demonstrating the fundamental process of handling file uploads in PHP.", 'The complete handler function fires when the upload is complete or when an error event is echoed back from the PHP file to the AJAX request, providing a comprehensive handling of upload completion and errors.', 'The new HTML5 progress bar is used to display the loaded and total bytes of the file being uploaded, providing a visual indication of the progress.', 'The tutorial emphasizes the flexibility to use custom graphics or elements other than the HTML5 progress bar for indicating file upload progress, encouraging creativity and customization in rendering progress meters.', 'Explaining the process of snatching up event reference in the arguments area of the function and accessing the event within the function.', 'Emphasizing that the event reference can be written as event, EVT, or E, and it will work in any form.']}], 'highlights': ['The demo showcases the live upload of a 2.8 megabyte video file with a real-time progress bar, providing developers with insight into file upload progress.', 'The JavaScript function calculates the percentage of the file uploaded by dividing the loaded bytes by the total bytes and multiplying by 100 to obtain a whole number percentage.', "The file upload parser PHP script handles the file upload process by checking for the file's presence in the temp folder, moving the file to the server, and echoing back relevant messages to the AJAX request, demonstrating the fundamental process of handling file uploads in PHP.", 'Adding event listeners for progress, complete, error, and abort events', 'The tutorial covers the usage of the input element for browsing and selecting a file, along with a button for initiating the upload.']}