Using HTML5 file uploads with AJAX and jQuery

Arjun Thakur
Updated on 16-Mar-2026 21:38:53

753 Views

HTML5 provides robust support for file uploads using AJAX and jQuery, allowing you to upload files asynchronously without page refresh. This approach uses the File API to read file contents on the client side and send them to the server via AJAX requests. Syntax Following is the basic syntax for HTML5 file input − JavaScript FileReader API syntax − var reader = new FileReader(); reader.readAsText(file, 'UTF-8'); reader.onload = function(event) { /* handle result */ }; Client-Side Implementation The client-side code captures the file upload process and uses the ... Read More

HTML5 check if audio is playing

mkotla
Updated on 16-Mar-2026 21:38:53

5K+ Views

In HTML5, you can check if an audio element is currently playing by using the paused property. This property returns a boolean value indicating whether the audio is paused or playing. Syntax Following is the basic syntax to check if audio is playing − audioElement.paused The paused property returns false when the audio is playing and true when it is paused or stopped. Using a Function to Check Audio Status Following function checks if an audio element is currently playing − function isPlaying(audelem) { return !audelem.paused; ... Read More

HTML DOM Pre Object

AmitDiwan
Updated on 16-Mar-2026 21:38:53

156 Views

The HTML DOM Pre Object represents the element in the Document Object Model (DOM). The element is used to display preformatted text, where whitespace and line breaks are preserved exactly as they appear in the HTML source. The Pre Object provides access to all the properties and methods of a standard HTML element, plus specific functionality for handling preformatted text content. Syntax To create a new pre element using JavaScript − document.createElement("PRE"); To access an existing pre element − document.getElementById("preId"); Creating a Pre Object You can ... Read More

How do we add a table row in HTML?

Alshifa Hasnain
Updated on 16-Mar-2026 21:38:53

1K+ Views

In this article, we will learn to add a table row in HTML. Tables are a fundamental part of web development, used to display structured data in rows and columns. In HTML, you can add table rows using the (table row) element inside a structure. Syntax Following is the syntax for adding a table row in HTML − Cell content Cell content Basic Table Structure Before adding rows, let's ... Read More

How do I add a simple onClick event handler to an HTML5 canvas element?

Ankith Reddy
Updated on 16-Mar-2026 21:38:53

6K+ Views

The HTML5 canvas element creates a drawing surface where shapes and graphics are rendered as pixels, not DOM elements. Unlike regular HTML elements, canvas drawings have no built-in click detection. To handle click events on canvas shapes, you must capture clicks on the canvas element itself and calculate which drawn shape was clicked based on coordinates. Syntax Following is the syntax to add a click event listener to a canvas element − canvas.addEventListener('click', function(event) { // Handle click event }, false); How Canvas Click Detection Works Canvas click detection involves ... Read More

How to save HTML Canvas as an Image with canvas.toDataURL()?

radhakrishna
Updated on 16-Mar-2026 21:38:53

1K+ Views

The HTML5 Canvas provides the toDataURL() method to export canvas drawings as image data URLs. This method converts the canvas content into a base64-encoded data URL, typically in PNG format, which can be used to save, display, or download the canvas as an image file. Syntax Following is the syntax for the toDataURL() method − canvas.toDataURL(type, encoderOptions) Parameters type (optional) − A string indicating the image format. Default is "image/png". Other supported formats include "image/jpeg" and "image/webp". encoderOptions (optional) − A number between 0 and 1 indicating image quality ... Read More

HTML5 geolocation 'permission denied' error in Mobile Safari

Jennifer Nicholas
Updated on 16-Mar-2026 21:38:53

601 Views

When developing mobile websites that request the user's current location on button click, HTML5 Geolocation API is commonly used. While this functionality works seamlessly in Mobile Chrome, Mobile Safari often encounters permission denied errors even when users grant location access. This issue occurs because Mobile Safari has stricter security policies and requires additional system-level permissions to be enabled. The geolocation request may fail silently or return a permission denied error despite user consent in the browser prompt. Understanding the Geolocation API The HTML5 Geolocation API allows web applications to access a user's geographical location through the navigator.geolocation ... Read More

Client Checking file size using HTML5

Arjun Thakur
Updated on 16-Mar-2026 21:38:53

524 Views

HTML5 provides a built-in File API that allows client-side file size checking without requiring Flash or server-side processing. This approach improves user experience by validating files before upload and provides immediate feedback to users. The File API is part of the HTML5 specification and is supported by all modern browsers. It allows JavaScript to access file properties including name, size, type, and last modified date through the files property of file input elements. Syntax Following is the basic syntax to access file size using the File API − var fileSize = document.getElementById('fileInput').files[0].size; The ... Read More

How to use an animated image in HTML page?

Lokesh Badavath
Updated on 16-Mar-2026 21:38:53

52K+ Views

Animated images in HTML are visual elements that display moving graphics on a web page. They are typically in GIF format (Graphics Interchange Format), which supports animation by storing multiple frames in a single file that play in sequence. We use the tag with the src attribute to add an animated image in HTML. The src attribute specifies the URL or file path of the animated image. You can also control the display size using the height and width attributes or CSS styling. Syntax Following is the basic syntax for adding an animated image − ... Read More

Bootstrap dropdown closing when clicked in HTML

usharani
Updated on 16-Mar-2026 21:38:53

2K+ Views

Bootstrap dropdowns automatically close when you click outside the dropdown area or on a dropdown item. Sometimes you may want to prevent the dropdown from closing when users click inside the dropdown content, allowing them to interact with forms, checkboxes, or other elements without the dropdown disappearing. Syntax Following is the syntax to prevent dropdown from closing using the hide.bs.dropdown event − $('#dropdownId').on('hide.bs.dropdown', function () { return false; }); Following is the syntax to prevent dropdown closing using stopPropagation() − $('#dropdownId .dropdown-menu').on('click', function(e) { ... Read More

Advertisements