File API read Summary of files

Simply put, the file API only specifies how to extract files from the hard disk and then hand them to JavaScript code that runs on the Web page. Unlike previous file uploads, the file API is not designed to submit files to the server.

It is also noteworthy that nothing about the file API can be done. It cannot modify the file, nor can it create a new file. To save any data, you can send the data to the server via Ajax, or save it in a local storage space.

Obtaining documents

• use the INPUT element . Set its Type property to file, which is the most common standard upload text box
• the hidden INPUT element . To keep the style consistent, you can hide the input element and display a nice button. When the user taps the button, the click event of the hidden input is invoked via JS
• drag and Drop . Drag and drop files on a webpage

Read text file Readastext ()

The file API allows you to read the contents of the files directly. Create an example

<input name="myAvatar" type="file" onchange="processFiles(this.files)" />

When a file is selected, the onchange event of the input element is triggered, so the processfiles () function is executed

var output = document.getElementById(‘fileOutput‘);var processFiles = function(files) {    // 一次只允许上传一个文件    var file = files[0];    var reader = new FileReader();    reader.onload = function(e) {           output.textContent = e.target.result;    }    reader.readAsText(file);};

Each file object has three useful properties: name, which holds the file name. Size saves the bytes of the file. Type the MIME type of the saved file

Read multiple files at once multiple

Add the Multiple property to the INPUT element to read multiple files at a time

<input name="myAvatar" type="file" multiple onchange="processFiles(this.files)" />

Loops over multiple files. Note that the OnLoad event is asynchronous

var processFiles = function(files) {    var fileContents = [];    for(var i=0, len = files.length; i< len; i++) {        // 每个文件建立一个文件句柄        var reader = new FileReader();        // 由于onload是异步处理函数，使用闭包记录i值。否则i一直等于len        (function(i) {            reader.onload = function(e) {                fileContents.push(e.target.result);                if(i === len - 1) {                    output.textContent = fileContents.join(‘\n\n\n‘);                }            }        })(i)        reader.readAsText(files[i]);    }};

Read picture file Readasdataurl ()

FileReader processing text content requires only one step. Also, it's so easy to manipulate the picture content. This is thanks to the Readasdataurl () method.

The following example deals with picture and file drag and drop. The submitted picture file is used to draw the background of the element.

var dropBox;document.addEventListener(‘DOMContentLoaded‘, function() {    dropBox = document.getElementById(‘dropbox‘);    dropbox.addEventListener(‘dragenter‘, ignoreDrag, false);    dropbox.addEventListener(‘dragover‘, ignoreDrag, false);    dropbox.addEventListener(‘drop‘, drop, false);}, false)var processFiles = function(files) {    var file = files[0];    var reader = new FileReader();    reader.onload = function(e) {        dropBox.style.backgroundImage = ‘url(‘ + e.target.result + ‘)‘;    };    // 读取图片    reader.readAsDataURL(file);};var ignoreDrag = function(e) {      e.stopPropagation();    e.preventDefault();};var drop = function(e) {    ignoreDrag(e);    var data = e.dataTransfer;    var files = data.files;    processFiles(files);};

Here's the HTML and CSS

<div id="dropbox">    <div>Drop your image here</div></div>#dropbox {     margin: 15px; width: 300px; height: 300px;     border: 5px dashed gray; border-radius: 8px;    background: lightyellow; background-size: 100%;     background-repeat: no-repeat; text-align: center;}#dropbox div { margin: 100px 70px; color: orange; font-size: 25px; }

Update 2014/07/10

Using recursion for asynchronous loops

var processFiles = function(files) {    var filesLen = files.length        , reader = null        , fileContents = []        , readFile = function(i) {            if(i === filesLen) {                // 递归的结束条件                output.textContent = fileContents.join(‘\n\n\n‘);                return;            }            reader = new FileReader();            reader.onload = function(e) {                fileContents.push(e.target.result);                readFile(i+1);                  // 保证输出顺序            };            reader.readAsText(files[i]);        };    if(!filesLen) return;    readFile(0);                                // 开始递归};

Reference: The Missing Manual