HTML5 关于文件操作的文件API(应用程序编程接口)

一、FileList对象与file对象
FileList对象表示用户选择的文件列表。在HTML4 中，file控件内只允许放置一个文件，但在HTML 5中，添加multiple属性，file控件内允许一次放置多个文件。控件内的每一个用户选择的文件都是一个file对象，而FileList对象对象则为这些file对象的列表，代表用户选择的所有文件。
file对象由两个属性:
1.name属性表示文件名不包括路径
2.lastModifiedDate属性表示文件的最后修改日期
accept=”image/*” 表示只能接收图像

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>文件上传</title>
 </head>
 <body>
 <input type="file" id="file" multiple size="80" accept="image/*" />
<input type="button" value="文件上传" onclick="showFiles();" />
<script>
/*获取多个文件*/
function showFiles(){
 //files返回FileList文件列表对象
 var file = document.getElementById("file");
  for(var i=0;i<file.files.length;i++){
    //获取单个文件
    singleFile = file.files[i];
    //获取文件名
    console.log(singleFile.name);
    //获取文件修改时间
    console.log(singleFile.lastModifiedDate);
 }
}
</script>
</body>
</html>

二、Blob对象
Blob表示二进制原始数据，它提供一个slice方法，通过该方法访问到字节内部的原始数据块。
Blob对象有两个属性：
1.size属性表示一个Blob对象的字节长度
2.type属性表示Blob的MIME类型，如果是未知类型，则返回一个空字符串

<input type="file" id="file" multiple size="80" accept="image/*">
<input type="button" value="显示文件信息" onclick="showFileType()"><br/>
文件字节长度:<span id="size"></span><br/>
文件类型:<span id="type"></span>

/*显示文件信息*/
function showFileType(){
  //files[0]获取一个文件
  var file = document.getElementById("file").files[0];
  var size = document.getElementById("size");
  //文件字节长度(B)
  size.innerHTML = file.size/1024+"KB";
  var type = document.getElementById("type");
  //文件类型
  type.innerHTML = file.type;
}

注意：对于图像类型的文件，Blob对象的type属性都是以”image/”开头的，后跟图像类型，利用此特性我们可以在JavaScript中判断用户选择的文件是否为图像文件，如果是批量上传时，如果用户选择的多个文件中有不是图像的文件时，可以弹出错误提示信息，并停止后面的文件上传，或者跳过这个文件，不将该文件上传

<input type="button" value="文件上传" onclick="fileUpload()">
function fileUpload(){
  var file = document.getElementById("file");
  for(var i=0;i<file.files.length;i++){
      singleFile = file.files[i];
      /* var reg = /image\/\w+/;
       *判断是否为"image/xxx"格式字符串
       * image\/  匹配image/
       * \w+      匹配一个单字符(字母，数字或下划线)
       * 第一个/及最后一个/  表示下一个字符具有特殊用处
      */
      if(!/image\/\w+/.test(singleFile.type)){
          alert(singleFile.name+"不是图像文件！");
          break;
      }else {
          alert("开始上传");
      }
  }
}

HTML5 关于文件操作的文件API(应用程序编程接口)

猜你喜欢