Html5 file Upload download instance code

The file API provided in HTML5 has a wealth of applications in the front end. Uploading, downloading, reading content, etc. are common in daily interaction. And the compatibility of each browser is also better, including the mobile terminal, except for IE only supports the version of IE10 or higher. If you want to better master the function of the operation file, you must first familiarize the every API.

The Input [Type = File] label in html has a Multiple attribute, allowing users to choose multiple files, and the FileList object means a list of files selected by the user. Each file in this list is a File object.

1. The attribute of the file object:
2. name: file name, does not include paths.
3. Type: file type. The file type files will start with iMage/, which can be limited to the upload of the picture.
4. size: file size. Other operations can be performed according to the size of the file.
5. LastModify: The final modification time of the file.

 <input type = file ID = Files Multiple> <Script> var Elem = Document.GetelementByid ('Files'); files; for (var I = 0; I <files.length; i ++) {// The file type is images and the file size is less than 200kb if (files [i] .Type.indexof ('Image/')! == -1 && Files [i] .size <204800 ) {console.log (files [i] .Name);}}} </script>

There is an access attribute in INPUT that can be used to specify the file type that can be submitted by file upload.

Accept = Image/* can be used to limit only to upload image formats. However, there is a problem with slow response under the webkit browser. It takes a few seconds to pop up the file selection box for a few seconds.

The solution is to change the* pass to the specified MIME type.

 <input type = file accept = image/gif, image/jpeg, image/jpg, image/png>

The BLOB object is equivalent to a container that can be used to store binary data. It has two attributes, the size attribute represents the byte length, and the Type attribute represents the MIME type.

How to create

The blob object can be created using the blob () construct function.

 var blob = new blob (['hello'], {type: text/plain});

The first parameter in the BLOB constructor is an array that can store ArrayBuffer objects, ArrayBufferView objects, Blob objects and string.

The blob object can return a new blob object through the slice () method.

 var newblob = blob.slice (0,5, {type: text/plain});

The slice () method uses three parameters, all optional. The first parameter represents the start position of the binary data in the BLOB object, the second parameter represents the end of the replication, and the third parameter is the MIME type of the BLOB object.

Canvas.toblob () can also create blob objects. TOBLOB () uses three parameters, the first is the callback function, the second is the picture type, the default is image/pNG, the third is picture quality, the value is between 0 and 1.

 var canvas = document.GetelementByid ('Canvas'); Canvas.toblob (function (blob) {console.log (blob);}, Image/JPEG, 0.5);

BLOD objects can generate a network address through the Window.url object, combined with the DOWNLOAD attribute of the A tag to achieve the download file function.

For example, download Canvas as a picture file.

 var canvas = document.GetelementByid ('Canvas'); Canvas.toblob (Function (BLOB) {// Use CreateObjecturn to generate an address, the format is blob: null/FD95B806-DB11-4F98-B98-B. 2ce-5eb16b38ba36 var url = url.createObject " blob); var a = document.createelement ('a'); a.Download = 'Canvas'; a.href = URL; // Simulates a tag to download a.Click (); // Tell the browser after downloading. No longer need to keep this file referenced by url.revokeobjectUrl (url);});

The string can also be saved as a text file with a similar method.

The FileReader object is mainly used to read the file into memory and read the data in the file. Create a FileReader object by constructing a function

 var Reader = New FileRereader ();

The object has the following methods:

1. Abort: Interrupt read operation.
2. ReadasArrayBuffer: Read the file content to the arrayBuffer object.
3. ReadasbinaryString: Read files as binary data.
4. Readasdataurl: Read the file as a Data: URL format.
5. Readastext: Read files as text.

The common application is to display the picture through the readasdataUrl () after uploading pictures on the client.

 <input type = file id = files accept = image/jpeg, image/jpg, image/png> <IMG SRC = Blank.gif ID = Preview> <Script> VAR ELEM = D ('Files'), IMG = document.GetelementByid ('Preview'); ELEM.OnChange = Function () {Var Files = ELEM.FILES, Reader = New FileRereader (); if (Files && FILES [0]) {Reader.onl OAD = FUNCTION (EV) { img.src = EV.Target.Result;} Reader.ReadasdataUrl (FILES [0]);}} </script>

However, when you take pictures on some mobile phones, there will be bugs when uploading photos, and the photos will be found, including Samsung and iPhone. Essence Essence The solution does not explain here. If you are interested, you can view: the solution of the mobile picture uploading and compressing

Readastext () of the FileReader object can read the text of the file, combined with the function of the Blob object to download the file, then the data export file is backup to the local area. When the data is recovered, upload the backup file through input and use Readastext () to use Readastext () Read text and restore data.

The code is similar to the above function. Do not repeat it here. For specific applications, please refer to: NotePad

ATOB and BTOA methods are added to HTML5 to support BASE64 encoding. Their naming is also very simple. B to a and a to B, which represents coding and decoding.

 var a = https: //lin-xin.github.io; var b = btoa (a); var c = atob (b); console.log (a); // https: //lin-xin.github. iconsole.log (b); // ahr0chm6ly9Saw4teglulmdgh1yi5pbw == Console.log (c); // https://lin-xin.github.io

The BTOA method encodes the string A, which will not change the value of A, and return a value after a encoding.

The ATOB method decodes the encoded string.

However, the Chinese in the parameters have exceeded the character range of the 8 -bit ASCII encoding, and the browser will report an error. Therefore, you need to encode the encodeuricomponent first.

 var A = Hello world; var b = btoa (enCodeuricomponent (a)); var c = decodeuricomponent (atob (b)); console.log (b); Jtk2juu3jtk1jthdConsole.log (c); // Hello World

The above is all the contents of this article. I hope it will be helpful to everyone's learning. I also hope that everyone will support VEVB Wulin.com.