Shulou(Shulou.com)05/31 Report--

In this article, the editor introduces in detail "how to use html5 file api to read local files". The content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to use html5 file api to read local files" can help you solve your doubts.

Get FileList through input of file type

Or the new multiple attribute for multiple file selection added by html5:

Generally speaking, we tie an onchange event to input:file so that after the user selects a file, we can immediately read the file and other next steps:

/ / 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;})

Manipulate drop events by dragging and dropping

The first step is to set up an area where you can drag and drop:

In addition, 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);}

How to read or make use of file objects?

Html5 provides two scenarios: FileReader and ObjectUrl.

Use FileReader to read file objects

First, you need to instantiate the FileReader object:

Var reader = new FileReader ()

Using FileReader to read the file object is an asynchronous process. We need to set the callback of the load event for FileReader and tell FileReader what further action should be taken after reading the data of the file object:

Reader.onload = function (e) {document.getElementById ("image"). Src = e.target.result;}

The above code means that FileReader reads the data of the picture and puts the data (DataUrl) into the src attribute of the.

Finally, through FileReader different methods, to decide what data format to store after reading file object data, and to implement reading:

ReadAsArrayBuffer (file): read the file object and store it as an ArrayBuffer object (I don't know what the ArrayBuffer object is, it should be a data structure for efficient access to data).

ReadAsText (file [, 'UTF-8']): reads the file object in normal text mode, and it is worth noting that the character encoding can be specified with the second parameter (optional).

ReadAsDataURL (file): reads the file object and stores it as a string in the format data: URL.

Using ObjectURL

ObjectURL is equivalent to a temporary path to a file, which can be generated and released at any time, and is no different from a normal url when used by a local browser.

Take, for example, displaying a local picture on a page:

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

At this point, SRC is shaped like blob: http://test.local.com/e03e8bbf-66ce-4fea-a8c8-772f9fdb4d40

Using this src allows browsers to read pictures locally.

The performance of this scheme is greatly improved compared with the base64 encoding of images generated by FileReader and put into src.

Comparing the two methods of 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 operation, such as using canvas screenshots or image compression. Of course, it's all about compatibility.

Read here, this article "how to use html5 file api to read local files" article has been introduced, want to master the knowledge of this article also need to practice and use in order to understand, if you want to know more related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.