JQuery multi-File Download

JQuery multi-File Download
File downloading is a very common function in the Web, but you will encounter this problem if you are an internal management system or an Internet company oriented to the public, generally, users who have some practical development experience can solve this problem by themselves. The multi-File Download was completed last week. The business scenario is to provide a data detail. An attachment originally only needs a pdf file, now we need to add two images for one-time download. This problem was not encountered before. I searched for it on the Internet. I had the idea that I needed to hide an iframe and set src. The general principle was like this. Then I started to compile the code myself: the business scenario comes from a customer management system of the company. To call it elsewhere, the following method is extended: (function ($) {var methods = {_ download: function (options) {var triggerDelay = (options & options. delay) | 100; var removeDelay = (options & options. removeDelay) || 1000; this. each (function (index, item) {methods. _ createIFrame (item, index * triggerDelay, removeDelay);}) ;}, _ createIFrame: funct Ion (url, triggerDelay, removeDelay) {// dynamically add iframe, set src, and delete setTimeout (function () {var frame = $ ('<iframe style = "display: none; "class =" multi-download "> </iframe> '); frame. attr ('src', url); $ (document. body ). after (frame); setTimeout (function () {frame. remove () ;}, removeDelay) ;}, triggerDelay) ;};$. fn. multiDownload = function (options) {methods. _ download. apply (this, arguments) ;};} (jQuery ); The above Code has no comments. iframe will load the src content. The above program call is very simple. The address in this array is the address requested by the server, make sure that the original server address can download files: var downloadUrl = ['server request address 1', 'server request address 2']; $ (downloadUrl ). multiDownload (); at that time, this function was successfully completed. Then I wanted to write a blog record the day before yesterday, but I was too lazy to write server code and put the file locally, if you attempt to get the same result and fail, let's look at the following code: <a href = "Content/keso1.zip"> zip file </a> click here to download the zip file directly, but if you change it to xx.jpg, xx.txt, because the browser needs to specify the Content-TYPE based on the MIME type (the media TYPE of the resource), if the requested background server needs to process local files, it cannot tell the browser a certain file. In the case of MIME Type, the browser also performs some default processing, which is related to the MIME Type configured for the file in the personal operating system. My computer is a Window. If you need to see the specific Content-type, the detailed address is as follows: Therefore, the image and text are usually displayed directly, while rar, the zip file browser does not recognize Content-type as a file download. To download the image directly, you can find a download attribute in Html. if you add a download attribute to the tag, jpg files are directly downloaded as files, and href is the image address. The browser compatibility is not tested. After all, there are 5 days: <a download = "keso.jpg" href = "keso.jpg"> Html5 download </a> at this time, you can start the original code, this method can automatically download files when you click it. Multiple files can be downloaded after a single file is downloaded: function downloadHtml5 (url) {var aLink = document. createElement ('A');, evt = document. CRES AteEvent ("HTMLEvents"); evt. initEvent ("click"); aLink. download = ""; aLink. href = url; aLink. dispatchEvent (evt);} modify the extension method: (function ($) {var methods = {_ download: function (options) {var triggerDelay = (options & options. delay) | 100; var removeDelay = (options & options. removeDelay) || 1000; if (options. source = "server") {this. each (function (index, item) {methods. _ createIFrame (item, index * TriggerDelay, removeDelay) ;};}; if (options. source = "local") {this. each (function (index, item) {methods. _ createLink (item, index * triggerDelay, removeDelay) ;};}, _ createIFrame: function (url, triggerDelay, removeDelay) {// Add iframe dynamically, set src, then delete setTimeout (function () {var frame = $ ('<iframe style = "display: none;" class = "multi-download"> </iframe> '); frame. attr ('src', url); $ (document. B Ody ). after (frame); setTimeout (function () {frame. remove () ;}, removeDelay) ;}, triggerDelay) ;}, // download attribute set_createlink: function (url, triggerDelay, removeDelay) {var aLink = document. createElement ("a"), evt = document. createEvent ("HTMLEvents"); evt. initEvent ("click"); // you do not need to set a file name. In personal testing, the original file name is required. If it is set to null, no problem occurs. For details, see aLink. download = ""; aLink. href = url; aLink. dispatchEvent (evt) ;}}; $. fn. mult IDownload = function (options) {methods. _ download. apply (this, arguments) ;};} (jQuery); the final code is called. You can download all six files: