js input file文件上传图片并展示。

项目中需要实现上传图片并预览的效果

这是一个Demo效果图。

具体内容：

1 页面HTML内容

<div class="imgContent">
    <img id="imgContentImg" src="" alt="">
    <input type="file" class="file" id="imgUpFile" οnchange="startRead()" style="position: absolute;left: 0;top: 0;width: 100%;height: 100%;">
</div>

2 获取input[file]元素

        function startRead() {
            var fileDom=document.getElementById('imgUpFile');
            var img=document.getElementById('imgContentImg');
            if (fileDom&&img){
                fileHandle(fileDom,img);
            }
        }

3 对获取的file元素操作，也就是操作fileReader属性

//文件处理
function fileHandle(fileDom,img) {
    //读取计算机文件
    var file=fileDom.files[0];
    var reader=new FileReader();
    reader.readAsDataURL(file);
    reader.onloadstart=function () {
        console.log('文件上传处理......')
    };
    //操作完成
    reader.onload = function(e){
        //file 对象的属性
        img.setAttribute('src',reader.result);
    };
}

这里就完成了一个简单的上传图片demo

关于file API主要有以下几个接口

1：Blob

2:  File

3:  FileList

4:  FileReader

FileList：

    var file=fileDom.files[0];

这里，默认状态下选择文件 每次files属性上FileList对象里只有一个file文件。

file对象中包含了name 文件名; size ; type 文件类型; lastModified 最后修改时间；

 FileReader：异步读取本地文件内容；包括File 和Blob；

    创建FileReader对象;读取file文件

var reader=new FileReader();

reader.readAsDataURL(file);

    关于fileReader的几个属性：

FileReader.error  只读 一个 DOMException 代表在读取文件中出现的错误。 FileReader.readyState  只读 一个数字表明的状态 FileReader 。这是以下之一：

EMPTY	0	尚未加载任何数据。
LOADING	1	数据正在加载。
DONE	2	整个读取请求已完成。

FileReader.result  只读 文件的内容。该属性仅在读取操作完成后才有效，并且数据的格式取决于使用哪种方法来启动读取操作。

fileReader的几个事件处理程序：

1 . FileReader.onbort:在读取操作中止时触发。

2 . FileReader.onerror:在读取操作遇到错误时触发。

3 . FileReader.onload:在读取操作成功完成时触发。

4 . FileReader.onloadstart:在开始阅读时触发。

5 . FileReader.onloadend:无论是否成功 只要读取操作完成都会触发。

6 . FileReader.onprogress:阅读Blob内容时触发。

FileReader的方法：

1 . FileReader.abort();中止读取操作

2 . FileReader.readAsArrayBuffer();完成时result属性包含ArrayBuffer表示文件数据

3 . FileReader.readAsBinaryString();完成时result属性将包含来自文件的原始二进制数据作为字符串。

4 . FileReader.readAsDataURL();完成时result属性包含data：表示文本数据的URL；

5 . FileReader.readAsText();完成时result属性包含文本的内容作为文本字符串。