Introduction to file types and their features

1. common file formats include txt, png, jpg, zip, and tar. Some browsers directly open the link to display the content, in addition, the browser does not recognize the response header, or cannot parse the corresponding format. Therefore, the browser directly downloads the response as an object. For example, the <a href = "http://barretlee.com/test.rar"> file </a> code, if you open a link directly, the browser will download the file directly. 2. dataURL is also a common type. It can be sent as a src or url () parameter. There are several common types: text: data: text/plain; here is the body content. Image: data: image/jpg; base64,/9j/4AAQSkZJRgABAQEA .... data: image/png; base64,/9j/4AAQSkZJRgABAQEA .... base64 is a widely used data format. Base64 format data: [] [; charset =] [; base64]. Use of Base64 in CSS :. demoImg {background-image: url ("data: image/jpg; base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL .... ");} Use of Base64 in HTML: 3. blob stream Blob objects represent unchangeable class file objects that contain raw data. For more information, see the MDN document. It is also very convenient to use, such as: var aFileParts = ['<a id = "a"> <B id = "B"> hey! </B> </a> ']; var oMyBlob = new Blob (aFileParts, {type: 'text/html'}); // the blobBlob receives two parameters, a Data Object of the array type can be ArrayBuffer, ArrayBufferView, Blob, String, and many other types. The second parameter is the MINE type setting. In this article, we will use the URLcreateObjectURL () function to convert the content represented by a URL into a DOMString. The result is a file object or Blob Object. 4. When we use the File API to read a binary stream, we get the binary stream format of the data. These types can be directly received by ArrayBuffer. If they are not used in this article, we will not elaborate on them. 2. JavaScript multi-File download HTML5 has an additional Property of tag a-download. When you click the link, the browser opens and displays the content of the link. If the download attribute is added to the link, clicking this link will not open this file, but will download it directly. Although it is easy to use, it is not compatible with browsers of earlier versions. The solution will be discussed in sections 2 and 3 of this section. Here, we can use the property detection UA to determine the browser type: h5Down = document. createElement ("a"). hasOwnProperty ("download"); var h5Down =! /Trident | MSIE /. test (navigator. userAgent); // Trodent used to identify the download attribute of IE111. Note: FF5.0/Safari5.0/Opera11.1/IE9.0 does not support the download attribute. You can directly download a single file using the download attribute, if you want to download multiple files at a time, you have to deal with it a little bit: function downloadFile (fileName, content) {var aLink = document. createElement ("a"), evt = document. createEvent ("HTMLEvents"); evt. initEvent ("click"); aLink. download = fileName; aLink. href = content; aLink. dispatchEv Ent (evt);} the download attribute serves not only to allow the browser to ignore the MIME type of the file, but also to use the value of this attribute as the file name. You can run this program on the chrome Console: downloadFile ("barretlee.html", "./"); the browser will prompt whether to retain (download) the html file. Previously we mentioned that the file type may also be dataURL or Blob stream. In order for the program to support these data types, slightly modify the above function: function downloadFile (fileName, content) {var aLink = document. createElement ('A');, blob = new Blob ([content]), evt = document. createEvent ("HTMLEvents"); evt. initEvent ("click"); aLink. download = fileName; aLink. href = URL. createObjectURL (blob); aLink. dispatchEvent (evt);} new Blob ([content]), convert the file into a Blog stream, and then use the URL. createObjectURL () Convert to a DOMString. In this way, we can support data64 and other data types of content ~ 2. window. after open, execCommand ("SaveAs") also mentioned above. Although the download attribute is a very convenient tool for H5, the earlier version of IE is not pleasing to the face, there are still many ways to convert IE, such as ADOBE. STREAM activeX objects can convert files into file streams and then write them into a file to be saved. Here we will talk about a slightly more convenient way: first write the content to a new window object, and then execute the Save command using execCommand, which is equivalent to pressing Ctrl + S on the page, in this way, all the information on the page is down. // Open the file in a window and hide the window. Var win = window. open ("path/to/file. ext "," new Window "," width = 0, height = 0 "); // press ctrl + s in the win Window to retain win.document.exe cCommand (" SaveAs ", true, "filename. ext "); // The window is closed after use. close (); this process is very clear, but there will be a problem here, not a program problem, but a browser problem. If we open a new window in sogou or 360 browser, it will open a new tab instead of a new window. Even worse, some Browsers Do Not Allow Windows. open (this can be set ). So I had to find another method. 3. Since the operation in iframe is so troublesome to open a new window, I will complete the work in this window ~ Function IEdownloadFile (fileName, contentOrPath) {var ifr = document. createElement ('iframe'); ifr. style. display = 'none'; ifr. src = contentOrPath; document. body. appendChild (ifr); // Save the page-> Save the file ifr.content)document.exe cCommand ('saveas', false, fileName); document. body. removeChild (ifr);} for general links, we can directly add the src attribute to iframe and execute the saveAs command. What if we use a data64 encoded file? Var isImg = contentOrPath. slice (0, 10) = "data: image"; // The status of dataURL isImg & ifr.content##doc ument. write (" Tell the browser that this is a stream file and it is sent to you as an attachment. Ignore the MINE type and save it directly. 2. if the backend server is configured with apche as the server, you can configure the htaccess file: <filesmatch "\. (zip | rar) $ "=" "> Header set Content-Disposition attachment </filesmatch> indicates that only files of the zip or rar type are requested, add a response header of Content-Disposition: attachment for a long time. In this way, you can omit the troublesome operations in the php code.