在表单选择（图片）文件之后马上在页面显示出来

在表单中点击选择文件之后，（图片）文件马上显示在页面当中。

文件读取FileReader

在JavaScript中要读取文件需要先创建文件读取对象，由文件读取对象帮助我们读取文件。怎么创建读取文件？在JavaScript当中有一个内置的构造函数叫 FileReader，创建FileReader的实例对象就是在创建文件读取对象。接下来使用文件读取对象去读取文件，调用它的 readAsDataURL 方法就可以。这个方法的作用就是读取文件，而且读取的是二进制文件，比如图片文件就属于二进制文件。

var reader = new FileReader();
 reader.readAsDataURL('文件');
 reader.onload = function () {
     console.log(reader.result); 
 }

看下面这幅图，左边是一张图片，右边是readAsDataURL 读取文件的结果（图片的编码）。它们实际上都是一张图片，是等价的，只不过左边的图片是人看懂的，右边的图片是机器看懂的。我们可以直接将读取出来的结果放到 img 标签的 src 属性当中，实际上显示的结果和平时写外部链接显示的结果是一样的。

注意，readAsDataURL 方法是一个异步方法，我们不能通过返回值的形式得到结果。我们需要文件监听的方式获取到读取文件的结果。在文件读取对象下面有一个 onload 事件，当文件读取完成之后 onload 事件就会被调用，在这个事件处理函数当中我们就能使用文件读取对象下面的 result 属性来获取这个文件读取的结果，也就是图片的编码。

完整例子：

<form action="/admin/article-add" method="post" enctype="multipart/form-data">
	// 如果在input 中加上 multiple 属性表示可以选择多个文件
	<input name="cover" type="file" id="file">
	<div>
		<img src="" id="preview">
	</div>
</form>

<srcipt>
	// 选择文件上传控件
    var file = document.querySelector('#file');
    // 选择图片控件
    var preview = document.querySelector('#preview');
    // 当用户选择完文件以后
    file.onchange = function(){
    	// 创建文件读取对象
    	var reader = new FileReader();
        // 在文件上传控件中有一个 files 属性，代表用户选择的文件列表，files[0] 表示第一个文件
        // 如果加了 multiple 属性上传多个文件的话，files[1] 就是第二个文件，files[2] 就是第三个文件 ...
     	// 读取文件
        reader.readAsDataURL(this.files[0]);
        // 监听onload事件
        reader.onload = function(){
          	// 将文件读取的结果显示在页面中
            preview.src=reader.result;
        }
     }
</script>