Examples of using html5 file api to read local files (such as pictures, PDF, etc.)

In the era of HTML4, if we want to present a user's local image on a web page, the user needs to upload the image to the server first, and then download the image according to the image address provided by the server before the image can be displayed on the web page. This back and forth has cost at least twice the traffic of this picture, not to mention the resources spent by the server to store this picture and the unjust cost of the user uploading the wrong picture (because in the HTML4 era, users choose After uploading a picture, you can often only see the file name of the picture, and you cannot further confirm whether the picture is the one you want to upload by previewing it).

HTML5 provides a new way to play. With the browser alone, you can render, read, and process local (actually, it can also be remote) files (mainly pictures), and all of this is done through the HTML5 File API. to achieve.

The first is the data structure. HTML5 defines a file object type to represent files, and each file object corresponds to a file. The file object has three attributes: name, size, and type. name is the file name without a path, size is the file size in bytes, and type is the MIME of the file (such as image/jpg).

The file object does not exist alone, but in the form of an array, in an array named FileList. So, how to get this FileList array? Currently, there are two ways to get FileList in HTML5, one is through file type input, and the other is through the drop event of drag and drop operation.

Get FileList through input of file type

 <input id=file-input type=file />

Or the new multiple attribute in HTML5 that allows multiple file selection:

 <input id=file-input type=file multiple />

Generally, we attach an onchange event to input:file so that after the user selects the file, the next steps such as reading the file can be performed immediately:

 //Native jsvar inputElement = document.getElementById(file-input);inputElement.addEventListener(change, handleFiles, false);function handleFiles() { var fileList = this.files; }//jquery version$('#file-input ').on('change', function() { var fileList = this.files;});

First, set an area for drag and drop:

 <div id=dropbox style=width: 200px;height: 200px;></div>

Additionally, in order to trigger the drop event, we must prevent the default behavior of the dragenter and dragover events:

 var dropbox;dropbox = document.getElementById(dropbox);dropbox.addEventListener(dragenter, dragenter, false);dropbox.addEventListener(dragover, dragover, false);dropbox.addEventListener(drop, drop, false);function dragenter(e) { e.stopPropagation(); e.preventDefault();}function dragover(e) { e.stopPropagation(); e.preventDefault();}

Then, we can get the fileList in the callback of the drop event:

 function drop(e) { e.stopPropagation(); e.preventDefault(); var dt = e.dataTransfer; var files = dt.files; handleFiles(files);}

HTML5 provides two solutions: FileReader and ObjectUrl.

First you need to instantiate the FileReader object:

 var reader = new FileReader();

Using FileReader to read file objects is an asynchronous process. We need to set the callback of the load event for FileReader first to tell FileReader what further operations it should perform after reading the data of the file object:

 reader.onload = function(e) { document.getElementById(image).src = e.target.result; }

The meaning of the above code is that after FileReader reads the image data, it puts the data (DataUrl) into the src attribute.

Finally, the different methods of FileReader are used to decide what data format to use to store the file object data after reading it, and implement the reading:

1. readAsArrayBuffer(file): Read the file object and store it as an ArrayBuffer object (I haven't figured out what the ArrayBuffer object is yet, it should be a data structure generated for efficient data access).
2. readAsText(file [, 'UTF-8']): Read the file object in general text mode. It is worth noting that the second parameter (optional) can be used to specify the character encoding.
3. readAsDataURL(file): Read the file object and store it as a string in data: URL format.

ObjectURL is equivalent to a temporary path to the file. This temporary path can be generated and released at any time. When used in the local browser, it is no different from an ordinary URL.

Take displaying a local image on the page as an example:

 var img = document.createElement(img);img.src = window.URL.createObjectURL(file);

At this time, src looks like: blob:http://test.local.com/e03e8bbf-66ce-4fea-a8c8-772f9fdb4d40

Using this src allows the browser to read the image locally.

Compared with using FileReader to generate the base64 encoding of the image and put it in the src, the performance of this solution has been greatly improved.

Comparing these two solutions for reading File objects, FileReader is suitable for uploading files, while ObjectURL is suitable for operating directly in the browser, and then uploading the processed data after the operation, such as using canvas to take screenshots or perform image compression, etc. . Of course, this all depends on compatibility.

The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.