javascript实现文件上传之前的预览功能

1.首先要给上传文件表单控件和图片控件设置name属性

<div class="form-group">

                   <label for="exampleInputFile">文章封面</label>

                   <input type="file" name="cover" id="file" >

                   <!-- multiple可以选择多个文件 -->

                   <div class="thumbnail-waper">

                       <img class="img-thumbnail" src="" id="preview" name="img">

                   </div>

  </div>

2.在内容底部加入script标签，并获取上传文件表单和图片控件

 var file = document.querySelector('#file');

 var preview = document.querySelector('#img');

3.为上传文件表单添加onchange事件

file.onchange = function () {

 

}

4.创建文件读取对象

file.onchange = fucntion ()

 {

　　var reader = new FileReader();

}

5.读取文件

file.onchange = function () {

　　var reader = new FileReader();

　　reader.readAsDataURL(this.files[0];

}

6.读取完成后展示到页面，使用onload事件

file.onchange = function () {

　　var reader= new FileReader();

　　reader.readAsDataURL(this.files[0];

　　reader.onload = function () {

　　　　preview.src = reader.result;
　　}

}