Introduction to the File API

Source: Internet
Author: User

The file API allows us to create files, store them in a security sandbox on the local file system, and read and manipulate files from other sources.

The Web application accesses the local file system through the Requestfilesystem method, which is global: Requestfilesystem (type, size, successcallback, opt_errorcallback); The first parameter represents the type of storage, with two values to choose from, temporary or persistent. With temporary, the stored data is determined by the browser at its discretion when it clears. Persistent indicates that only your program can decide when to clear the data. The second parameter is a number that indicates how much space you want to use, the unit is MB, and the latter two are the callback methods that request success and failure (optional). If all goes well, the system invokes a successful callback function and passes in a FileSystem object, and all the file APIs need to be based on this object to use more or less.To create a file:Window.requestfilesystem (Temporary, 1024x768 * 1024x768, function (FS) {fs.root.getFile (' myfile.txt ', {create:true}, function ( Fileentry) {//do something with the fileentry}); The GetFile method can be used to create or retrieve a file, the first parameter is a filename, can contain an absolute or relative path, the second parameter is a JS object, used to determine the behavior of the function when the file does not exist, in this case create:true means that when the file does not exist, the function will create this file, Instead of throwing exceptions, you can use Fileentry's GetMetaData method to get the file's metadata fileentry.getmetadata (function (MD) {alert ( Md.modificationTime.toDateString ());}, OnError);Read file:After you get the Fileentry object, you can call its file method with the FileReader API to get the contents of the Requestfilesystem (temporary, 1024*1024, function (FS) { Fs.root.getFile (' MyFile.txt ', {}, function (Fileentry) {fileentry.file (function (file) {var reader = new FileReader (); Reader.onload = function (e) {alert (reader.result);}; Reader.readastext (file); Read the file as plain text (other formats also)});});Write file:var blobbuilder = Webkitblobbuilder;requestfilesystem (temporary, 1024*1024, function (FS) {fs.root.getFile (' temp.txt ') , {create:true}, function (Fileentry) {fileentry.createwriter (function (fileWriter) {filewriter.onwrite = function (e) { Console.log (' write Complete ');}; Filewriter.onerror = function (e) {Console.log (' Write failed ')};var bb = new Blobbuilder (); Bb.append (' My file contents '); Filewriter.write (Bb.getblob (' Text/plain '));}); The steps to write the file are as follows, using the Blobbuilder API to create a binary object, passing it to the write method of the FileWriter object, and then responding to the success or failure of the write in the Onwrite/onerror event of the FileWriter object.append content to an existing file:Blobbuilder = Blobbuilder | | Webkitblobbuilder | | Mozblobbuilder;requestfilesystem (temporary, 1024*1024, function (fs) {var bb = new Blobbuilder;fs.root.getfile (' MyFile.txt ', {create:false}, function (Fileentry) {fileentry.createwriter (function (fileWriter) {Filewriter.seek ( Filewriter.length); Filewriter.write (Bb.getblob (' Text/plain ');});}); The above code calls the Seek method of the FileWriter object, moves the file pointer to the specified location, and the new position is measured in bytes from the beginning of the file header, in this case using Filewrtier.length as the parameter, moving the file pointer to the end of the file, and writingHow to import files to filesystem:1 using <input type= "file"/> Label 2 using HTML5 drag API3 using XMLHttpRequest4 using Copy & pasteInput:document.getElementById (' myfile '). onchange = function (e) {var f = this.files[0];requestfilesystem (temporary, 1024* 1024x768, function (FS) {Fs.root.getFile (F.name, {create:true}, function (Fileentry) {Fileentry.createwriter (function ( FileWriter) {filewriter.write (f);});}); The Write method of FileWriter can accept binary objects or file (virtually all file are BLOBs).To download a remote file using XMLHttpRequest:var writeblob = function (dir, blob, FileName, callback) {dir.getfile (filename, {create:true}, function (fileentry) {Filee Ntry.createwriter (function (writer) {if (callback) {writer.onwrite = callback;} Writer.write (BLOB);});}; var downloadimage = function (URL, mimeType) {var xhr = new XMLHttpRequest (); Xhr.open (' GET ', url, true); Xhr.responsetype = ' blob '; xhr.onload = function (e) {if (This.status = =) {var parts = url.split ('/'); var fileName = Parts[parts.length-1 ];window.requestfilesystem (Temporary, 1024*1024*5/*5mb*/, function (FS) {var onwrite = function (evt) {Console.log (' Write succeeded. ');};/ /NOTE: This is not Xhr.responsetextwriteblob (Fs.root, Xhr.response, FileName, onwrite);};}; Xhr.send (null);}; Downloadimage (' your/img.jpg ', ' image/jpeg '); The above code loads a file from the remote and stores it locally filesystem, it is important to note that before making the request,  You need to set Xhr.responsetype, which can be selected from text, Arraybuffer, blob, or document, depending on the type of data you need to return, and the text type is default if omitted. http://cube.qq.com/?p=199

Introduction to the File API

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.