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

比眉伴天荒 2022-05-31 10:22 156阅读 0赞

一、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("开始上传");
          }
      }
    }