HTML5新增文件操作

files对象

这个对象是上传的文件对象集合；
里面包含了每个上传文件的信息和上传文件的length；
需要给input元素添加change事件监听；

var inputFile=document.getElementById('file');
inputFile.onchange=function(){
 console.log(this.files);
}

FileReader对象

可以读取本地文件内容；

var reader = new FileReader();
它是一个构造函数,可以实例化一个对象；

FileReader的MDN手册
常用的方法

readAsText()

开始读取指定的Blob或者File 对象中的内容。一旦完成，result属性中将包含一个字符串以表示所读取的文件内容。
代码示例：

window.onload=function(){
 var div = document.querySelector('div');
 var inputFile=document.getElementById('file');
 inputFile.onchange=function(){
   console.log(file.files);
   var reader = new FileReader();
   //	读取 this.files[0] 文件里面的内容；
   reader.readAsText(this.files[0]);
   //	当文件的内容读取完成之后促发；内容存放到了result里面了；
   reader.onload = function() {
   //	把result里面的内容渲染到div里面
     div.innerHTML = this.result;
   }
 }
}

readAsDataURL()

开始读取指定的Blob或者files中的内容。一旦完成，result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容。
可以用于读取图片；
代码示例：

<input type="file" name="" id="file" multiple>
  <!-- 图片的src为空 -->
  <img src="" alt="" width="200">
  <script>
    window.onload=function(){
      var img= document.querySelector('img');
      var inputFile=document.getElementById('file');
      inputFile.onchange=function(){
        console.log(file.files);
        var reader = new FileReader();
        reader.readAsDataURL(this.files[0]);
        reader.onload = function() {
        //	result中存放了图片的信息，把它赋值给图片的src，就会在页面上渲染出图片
          img.src = this.result;
        }
      }
    }
  </script>