File upload and download functions in HTML5

In website construction, file uploading and downloading are inevitable. The API provided in HTML5 has rich applications on the front end, which perfectly solves the compatibility issues of various browsers, so hurry up and get it!

FileList object and file object

The input[type="file"] tag in HTML has a multiple attribute, which allows the user to select multiple files. The FileList object represents the file selected by the user. list. Each file in this list is a file object.

Attributes of the file object:

• name: file name, excluding path.

• type : File type. Files of image type will all start with image/, which can be used to restrict uploading to only images.

• size : File size. Additional operations can be performed based on file size.

• lastModified: The time when the file was last modified.

<input type="file" id="files" multiple><script>
    var elem = document.getElementById('files');
    elem.onchange = function (event) {        
    var files = event.target.files;       
     for (var i = 0; i < files.length; i++) {
     // 文件类型为 image 并且文件大小小于 200kb
            if(files[i].type.indexOf(&#39;image/&#39;) !== -1 && files[i].size < 204800){
                            console.log(files[i].name);
            }
        }
    }
    </script>

There is an accept attribute in input, which can be used to specify the file types that can be submitted through file upload.

accept="image/*" can be used to limit only the image formats allowed to be uploaded. However, there was a slow response problem under the Webkit browser, and it took several seconds for the file selection box to pop up.

The solution is to change the * wildcard character to the specified MIME type.

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

Blob object

The Blob object is equivalent to a container and 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

Blob objects can be created using the Blob() constructor.

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

The first parameter in the Blob constructor is an array, which can store ArrayBuffer objects, ArrayBufferView objects, Blob objects and strings.

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 of which are optional. The first parameter represents the starting position of the binary data in the Blob object to be copied, the second parameter represents the end position of the copy, 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 image type, the default is image/png, and the third is the image quality, the value is between 0 and 1.

var canvas = document.getElementById('canvas');
canvas.toBlob(function(blob){ console.log(blob); }, "image/jpeg", 0.5);

Download files

The Blod object can generate a network address through the window.URL object and combine it with the download attribute of the a tag to implement the file download function.

For example, download canvas as an image file.

var canvas = document.getElementById('canvas');
canvas.toBlob(function(blob){    // 使用 createObjectURL 生成地址，格式为 blob:null/fd95b806-db11-4f98-b2ce-5eb16b38ba36
    var url = URL.createObjectURL(blob);    var a = document.createElement('a');
    a.download = 'canvas';
    a.href = url;    // 模拟a标签点击进行下载
    a.click();    // 下载后告诉浏览器不再需要保持这个文件的引用了
    URL.revokeObjectURL(url);
});

You can also save the string as a text file with a similar method.

FileReader object

The FileReader object is mainly used to read files into memory and read the data in the file. Create a FileReader object through the constructor

var reader = new FileReader();

The object has the following methods:

• abort: abort the read operation.

• readAsArrayBuffer: Read the file content into the ArrayBuffer object.

• readAsBinaryString: Read the file as binary data.

• readAsDataURL: Read the file as a string in data: URL format.

• readAsText: Read the file as text.

Upload image preview

A common application is to display the image through readAsDataURL() after the client uploads the image.

<input type="file" id="files" accept="image/jpeg,image/jpg,image/png"><img src="blank.gif" id="preview"><script>
    var elem = document.getElementById('files'),
        img = document.getElementById('preview');
    elem.onchange = function () {        var files = elem.files,
            reader = new FileReader();        if(files && files[0]){
            reader.onload = function (ev) {
                img.src = ev.target.result;
            }
            reader.readAsDataURL(files[0]);
        }
    }</script>

However, there is a bug when uploading photos when taking photos vertically on some mobile phones, including Samsung and iPhone, and you will find that the photos are upside down. . . The solution will not be explained here. If you are interested, you can view: Solution for mobile image upload rotation and compression

Data backup and recovery

FileReader object's readAsText() can read the text of the file , combined with the function of Blob object downloading files, it is possible to back up the data export file to the local. When the data needs to be restored, upload the backup file through input, and use readAsText() to read the text and restore the data.

The code is similar to the above function. It will not be repeated here. For specific applications, please refer to: notepad

Base64 encoding

Added atob and btoa methods in HTML5 to support Base64 coding. Their names are also very simple, b to a and a to b, which represent encoding and decoding.

var a = "https://lin-xin.github.io";var b = btoa(a);var c = atob(b);console.log(a);     // https://lin-xin.github.ioconsole.log(b);     // aHR0cHM6Ly9saW4teGluLmdpdGh1Yi5pbw==console.log(c);     // https://lin-xin.github.io

The btoa method encodes the string a without changing the value of a and returns an encoded value.
atob method decodes the encoded string.

But the parameter contains Chinese characters, which exceeds the character range of 8-bit ASCII encoding, and the browser will report an error. Therefore, the Chinese needs to be encoded with encodeURIComponent first.

var a = "哈喽 世界";var b = btoa(encodeURIComponent(a));
var c = decodeURIComponent(atob(b));console.log(b);//JUU1JTkzJTg4JUU1JTk2JUJEJTIwJUU0JUI4JTk2JUU3JTk1JThDconsole.log(c);

The above is the detailed content of File upload and download functions in HTML5. For more information, please follow other related articles on the PHP Chinese website!