var fr = new FileReader();

<input type="file" id="choose"><br><br><img  src="" id="image"    style="max-width:90%"具体解析HTML5文件读取FileReader及文件读取模块的封装" >

var choose = document.getElementById('choose');var img = document.getElementById('image');choose.onchange = function(){  showImg(this, img);}function showImg(chooseDom, imgDom){  var file = chooseDom.files[0]; //获取FileList对象的第一个元素——一个File对象  var fr = new FileReader(); //实例化FileReader对象  fr.onload = function(e){     imgDom.src = e.target.result; //e.target引用fr  }  fr.readAsDataURL(file); //读取为DataURL}

if(!/image\/\w+/.test(file.type)){      //...    return false;  }

<input type="file" id="choose"><br><br><p id="demo"></p>

var choose = document.getElementById('choose');var demo = document.getElementById('demo');choose.onchange = function(){  showText(this, demo);}function showText(chooseDom, textDom){  var file = chooseDom.files[0];  var fr = new FileReader();  fr.onload = function(e){    textDom.innerHTML = e.target.result;  }  fr.readAsText(file);}

//events事件回调对象包含success,load,progressvar FileLoader = function (file, events) {    this.reader = new FileReader();        this.file = file;        this.loaded = 0;        this.total = file.size;        this.step = 1024 * 1024;//每次读取1M    this.events = events || {};        this.bindEvent();        this.readBlob(0);//读取第一块}FileLoader.prototype = {    bindEvent: function (events) {        var _this = this,            reader = this.reader;        reader.onload = function (e) {            _this.onLoad();        };        reader.onprogress = function (e) {            _this.onProgress(e.loaded);        };        // start、abort、error回调暂无    },    onProgress: function (loaded) {        var percent,            handler = this.events.progress;                    this.loaded += loaded;        percent = (this.loaded / this.total) * 100;        handler && handler(percent);    },    // 读取结束（每一次执行read结后调用）    onLoad: function () {        var handler = this.events.load;                // 在此发送读取的数据        handler && handler(this.reader.result);                // 如果未读取完毕继续读取        if (this.loaded < this.total) {                    this.readBlob(this.loaded);        } else {                    // 读取完毕            this.loaded = this.total;                        // 如果有success回调则执行            this.events.success && this.events.success();        }    },    // 读取文件内容    readBlob: function (start) {        var blob,            file = this.file;                    // 若支持slice方法，则分步读取，不支持就一次性读取        if (file.slice) {            blob = file.slice(start, start + this.step + 1);        } else {            blob = file;        }        this.reader.readAsText(blob);    },        // 中止读取    abort: function () {        var reader = this.reader;                if(reader) {            reader.abort();        }    }}