Using JavaScript to manipulate local files

Last Update:2018-01-14 Source: Internet

Author: User

Tags base64 file type file

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Display user Select File "picture" Implementation code as follows

1 <!DOCTYPE HTML>2 <HTML>3 <Head>4     <MetaCharSet= "Utf-8">5     <title>JavaScript displays user-selected pictures</title>6 </Head>7 <Body>8    <Div>9      <inputtype= "File"name= "Picture"onchange= "SelectPicture (this)" Ten Accept= "Image/gif,image/jpeg,image/jpg,image/png" /> One      <imgsrc=""width= "240px"ID= "image"/> A    </Div> -    <Scripttype= "Text/javascript"> -            functionselectpicture (evt) { the             if (!Evt.files|| !evt.files[0]) { -                 return; -             } - Console.log (evt.files); +             varFileName=evt.files[0].name,//file name, this property is read-only - fileSize=evt.files[0].size,//file size in bytes, this property is read only; (1KB = 1024Bytes; 1MB = 1024KB) + FileType=evt.files[0].type; //The MIME type of the file type file, or an empty string if the type is not distinguished, and the property is read-only.  A Console.log ("total size of file"+fileSize); at             //The FileReader contains a complete set of event models to capture the state when reading a file: -             varReader= NewFileReader (); -                //onerror file Read error - Reader.onerror= function(){ - Console.log ("file read Error ..."); -                } in                //in file read - reader.onprogress= function(evt) { to Console.log (evt); + Console.log (evt.loaded);//current file Read Progress - Console.log ("file read in ..."); the                    if(evt.lengthcomputable) { *                       //Current Upload Progress $ Console.log (Math.Round (evt.loaded/fileSize) (*100) + "%");Panax Notoginseng                    } -                } the                //trigger when file read completes successfully + Reader.onload= function(evt) { A document.getElementById ('Image'). SRC=Evt.target.result; the Console.log (fileName); + Console.log (fileSize); - Console.log (fileType); $                 } $                 //reads a file as Dataurl returns a Data-uri object based on BASE64 encoding - Reader.readasdataurl (evt.files[0]); -            } the    </Script> - </Body>Wuyi </HTML> the  -

The above print Evt.files logs log information

File  provides information about the files and allows JavaScript in the Web page to access their content FileList objects typically come from the files property of an HTML INPUT element. You can access the files selected by the user by this object for a few properties of the file file object LastModified returns the last modified time (in milliseconds; property: Read only) of the file referenced by the current files object; Type of multi-purpose Internet Mail extension type (properties: Read-only) that returns a file ; name returns the name (property: Read-only) of the file referenced by the current file object, size (property: Read-only), and Webkitrelativepath returns the path or URL (property: Read-only) of the files related; lastmodifieddate A Date Object (property: Read-only) that returns the last modified time of the file referenced by the current files object;

The FileReader object allows a Web application to asynchronously read the contents of a file (or raw data buffer) stored on a user's computer, using File or Blob specifying the file or data to be read

OnError file read error OnProgress file read when the onload file reads successfully when the readasbinarystring is triggered (blob| File): Returns a binary string that contains an integer from 0 to 255 for each byte in the string. Readastext (blob| File, opt_encoding): Returns a text string. By default, the text encoding format is ' UTF-8 ', and you can specify text in other encoded formats with optional format parameters. Readasdataurl (blob| File): Returns a Data-uri object based on the BASE64 encoding. Readasarraybuffer (blob| File): Returns a Arraybuffer object.

Data reference

Https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader

Http://javascript.ruanyifeng.com/htmlapi/file.html

Using JavaScript to manipulate local files

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More