JavaScript uses the HTML5 file API to read files

JavaScript uses the HTML file API to read files, noting that "read" is read-only and does not take the initiative to get a list of files from the host on which the browser resides.

HTML5 in Fileapi mainly have FileUpload, File,FileList,fileerror,Blob,filereader,datatransfer.

Here the main test file. It is therefore necessary to give a test target

<form action= "javascript:void (0)" method= "POST" enctype= "Mutipart/form-data" ><input type= "file" Name= " Upfile "id=" Upfile "accept=" image/* "multiple=" multiple "/></form>

I. FileUploadis the essence of fileinputhtml4.01 and XHTML 1.0 API here is not much to talk aboutTwo. File is the object of the HTML5 object, and in HTML5, each file that is added to files input is an object, note that this object is generally not generated manually (security considerations).

var upfile = document.queryselector (' #upfile '); upfile.onchange = function (evt) {var e = evt | | window.event;   if (upfile.files.length>0) {alert ((Upfile.files[0] instanceof File)); }}

The public API for file is (the path cannot be seen)

Lastmodifiedlastmodifieddatenametype

Three. FileList is a list of file lists, this API is rarely

var upfile = document.queryselector (' #upfile '); upfile.onchange = function (evt) {var e = evt | | window.event;   if (upfile.files)//Upfile.files, this object is generally provided by the system, and can not generate {alert (upfile.files) itself; }}

Main API Properties

Lengthitem (Index)

Four. Fileerror This class can be generated by itself, mainly to prompt for errors in file operations, the following basic is a constant, you can directly use the "class name."

Abort_err:3encoding_err:5invalid_modification_err:9invalid_state_err:7not_found_err:1not_readable_err:4no_ Modification_allowed_err:6path_exists_err:12quota_exceeded_err:10security_err:2syntax_err:8type_mismatch_err: 11

Five.blob is binary data, at some point, in order to allow the database to store all kinds of data, handwriting needs to convert the data to BLOB data, in the H5 the following example

var htmlparts = ["<a id=\" a\ "><b id=\" b\ ">hey!<\/b><\/a>"];  var myblob = new Blob (htmlparts, {"type": "Text\/xml"});  2 parameters are optional, the first is an array, the second is mine-type//below is an example of using a BLOB object to generate a downloadable file.  var blob = new Blob (["Hello World"]); var a = document.createelement ("a"); a.href = window. Url.createobjecturl (BLOB); a.download = "Hello-world.txt";  A.textcontent = "Download Hello world!"; Body.appendchild (a);//can also be used with FormData to upload files var formData = new FormData ();//Files Formdata.append (field, file, filename); Blobs formdata.append (field, blob, filename);//You can also use Ajax to send data xhr.send (BLOBs) directly; I do not see how to use it, I hope readers can search the network information

Six.filereader file Reader for reading client files to, note that the cache is not loaded after the file has been read

var upfile = document.queryselector (' #upfile '), var filereader = new FileReader (), filereader.onload = function (evt) {i         F (filereader.done==filereader.readystate) {var img = document.createelement (' img '); IMG.SRC = This.result;         Is the data URL of Base64 document.body.appendChild (IMG);     Console.log (FileReader); }}filereader.readasdataurl (Upfile.files[0]);

Related APIs

Error:nullonabort:nullonerror:nullonload:nullonloadend:nullonloadstart:nullonprogress:nullreadystate:result:d One:2empty:0loading:1abort:function abort () function Readasbinarystring:function readasbinarystring (File Object) fun Ction readasdataurl (File object) function Readasdataurl (file object) function Readastext (file object);

Seven.datatransfer and Datatransferitemlist data transfer objects, such APIs are mainly used for the interaction of page data, such as drag-and-drop uploads, drag-and-drop selection, etc.

Note: This object is generated by an object, so it is common to use

<! Doctype html> 
 
or drag and drop external files for data copying and transfer
 
<!doctype  html> 
 
 
These datatransfer are the main API
 
Where Setdragimage is to be displayed when dragging, Evt.dataTransfer.setDragImage (imageobject,x,y);
 
if (event.dataTransfer.setDragImage) {var rainbow = document.getelementsbytagname (' img ') [0         ];  Event.dataTransfer.setDragImage (Rainbow, 0, 0); }
 
Try doing it
JavaScript uses the HTML5 file API to read files