By Rob Gravelle
Javascript: Load an Image from url and display. But what I want is not for the image to open in a new window, or download to my computer. Browse other questions tagged javascript image load or ask your own question. 5 years, 8 months ago. 91,038 times.
Many of the HTML5 additions to the HTML landscape have been trumpeted with much fanfare. Meanwhile, a new attribute has been added to the a <a> element that has gone unnoticed by many writers and developers. It's the download attribute and it promises to replace PHP-driven file download scripts with a completely HTML-based paradigm. In today's article, we'll be looking at how to use this exciting new markup element.
One Attribute, Two Functions
One use of the download attribute is to set a different file download name than the actual link target itself.
It's also useful for downloading browser-friendly files like images instead of navigating to the file. You can even keep the original file name by omitting the file name parameter:Testing for Browser Support
At this time, neither Internet Explorer or Safari support the download attribute. For users of those browsers, you might want to suggest a file name to Save As. The following jQuery code appends downloading instructions beside the download link. Testing for the download attribute is achieved using a [attribute name] in element test. The jQuery get() function is employed to return the underlying <a> element.
Downloading Multiple Files with One Click
Javascript Download Image From Url To Google
It stands to reason that if you can trigger the click event on hyperlinks using JavaScript code, you should be able to download multiple files at once. However, in practice, only Chrome seems to support this.
Such a feature would be useful where you wanted to give the user the option of downloading a whole page of images via a 'Download All' link. Here is a simple example with three image links.
Clicking on the last link would invoke the following click() code. Note that the images are retrieved for the purposes of triggering the click events and not the '<a>' tags. It's easy to forget that the elements within the '<a>' tags are what triggers the link-through action and not the '<a>' element itself.
The each() call isn't really necessary because trigger() will be invoked on every element in the queried collection.
Using a Button Instead of a Link
Just because the download attribute is limited to hyperlinks, that doesn't mean that we can't use the above technique to invoke it on other elements, such as a button. In fact, the only thing that would change is the element ID.
A more complex scenario would be a situation where the images are not contained within <a> tags. Now to download the images, we have to dynamically create the <a> tags and copy the image paths to the href attribute. Such is the case in the following HTML, where the images are presented but not contained in links:
Each image is identified as being downloadable by the 'download_file' class. Unlike the previous example, the each() is now necessary because several operations need to be performed. The first is to wrap the image in the jQuery object and store it into a variable for later use. The second line is where most of the work takes place. In it, an <a> tag is created dynamically and appended to the document body. The short form of 'body' is used instead of the full 'document.body' identifier. Appending the link to the DOM is essential because otherwise, the trigger() won't do anything. However, it will execute if the <a> element has a CSS display value of 'none'.
Conclusion
While not yet supported across all major browsers, the download attribute is already making waves as a much anticipated alternative to server-side PHP-based file downloading solutions. In the meantime, give it a try, but don't get rid of your backup code just yet.
Rob Gravelle resides in Ottawa, Canada, and is the founder of GravelleWebDesign.com. Rob has built systems for Intelligence-related organizations such as Canada Border Services, CSIS as well as for numerous commercial businesses.
In his spare time, Rob has become an accomplished guitar player, and has released several CDs. His band, Ivory Knight, was rated as one Canada's top hard rock and metal groups by Brave Words magazine (issue #92).
Javascript Download Image From Url
IT Solutions Builder TOP IT RESOURCES TO MOVE YOUR BUSINESS FORWARD