HTML5的File API

HTML结构

<div id="image"></div>
<input type="file" id="uploadFile">
<div id="fileInfo"></div>

CSS样式

#image{
      /*width:300px;*/
      height:400px;
      background-repeat: no-repeat;
      -webkit-background-size: cover;
      background-size: cover;
    }
#fileInfo{
  min-height: 20px;
  line-height: 20px;
  border:2px solid #DB4700;
  padding: 5px;
}

JavaScript代码

var uploadFile = document.getElementById('uploadFile');
  var bgImage = document.getElementById('image');
  var fileInfo = document.getElementById('fileInfo');

  //监听input的变化
  uploadFile.addEventListener('change',function () {
    //清空背景图
    bgImage.style.backgroundImage = '';
    if(!uploadFile.value){
      fileInfo.innerHTML = '没有选择任何文件';
      return;
    }

    //获取file
    var file = uploadFile.files[0];
    fileInfo.innerHTML = `文件名称：${file.name}<br>
                          文件大小：${file.size}<br>
                          修改时间：${file.lastModifiedDate}`;
    if(file.type !== 'image/jpg' && file.type !== 'image/png'){
      alert('图片格式不对');
      return;
    }
    console.log(uploadFile.files[0]);
    //读取文件
    var reader = new FileReader();
    reader.onload = function (e) {
      console.log(reader);
      var data = e.target.result;
      bgImage.style.backgroundImage = 'url('+ data +')';
    }
    reader.readAsDataURL(file);
  })

我们打开上面的页面，选择一个图片，可以看到图片的名称、图片大小、修改时间，也可以预览一下图片。

下图是我们获取文件的控制台信息

uploadFile.files[0] 返回一个FileList对象（有一个属性length，表示文件（File对象）个数），里面包含了一个或多个File对象，每个File对象都有自己的属性：

• file.name：文件名，该属性只读。
• file.size：文件大小，单位为字节，该属性只读。
• file.type：文件的MIME类型，如果分辨不出类型，则为空字符串，该属性只读。
• file.lastModified：文件的上次修改时间，格式为时间戳。
• file.lastModifiedDate：文件的上次修改时间，格式为Date对象实例

注意：如果要允许用户选取多个文件，需要加上multiple属性

<input type="file" multiple id="uploadFile"/> 

上面我们知道如何获取文件信息了，那么我们如何使用这些信息呢？
这时我们就要用到FileReader API了，此API用于读取文件，即把文件内容读入内存。
首先，我们需要实例化一个FileReader();

var reader = new FileReader();

不同类型的文件，FileReader提供了不同的方法来读取文件:

• readAsBinaryString(Blob|File)：返回二进制字符串，该字符串每个字节包含一个0到255之间的整数。
• readAsText(Blob|File,opt_encoding)：返回文本字符串。默认情况下，文本编码格式是’UTF-8’，可以通过可选的格式参数，指定其他编码格式的文本。
• readAsDataURL(Blob|File)：返回一个基于Base64编码的data-uri对象。
• readAsArrayBuffer(Blob|File)：返回一个ArrayBuffer对象，即固定长度的二进制缓存数据。

在上面的代码中，我们总共分为5个步骤

1. 我们通过onchange去监听input内文件信息的变化 。
2. 通过file.type判断用户选择的是否是图片。
3. 使用File对象的readAsDataURL()方法来返回一个data URL
4. 然后使用onload事件监听文件是否读取完毕。
5. 如果读取完毕，我们就可以使用事件对象e来读取文件内容，也就是e.target.result。

FileReader API的其他监听事件

• onabort方法：读取中断或调用reader.abort()方法时触发。
• onerror方法：读取出错时触发。
• onload方法：读取成功后触发。
• onloadstart方法：读取将要开始时触发。
• onprogress方法：读取过程中周期性触发。
• onloadend方法：读取完成后触发，不管是否成功。触发顺序排在 onload 或 onerror 后面。

表单File的一些控件

<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">
<input type="file" accept="image/*;capture=camera">直接调用相机
<input type="file" accept="image/*" />调用相机 图片或者相册
<input type="file" multiple accept="image/*" />

注意：capture表示，可以捕获到系统默认的设备，比如：camera–照相机；camcorder–摄像机；microphone–录音。如果multiple，capture就不生效了，因为multiple是专门用来支持多选的。