首页 > 代码库 > HTML5的File API读取文件信息

HTML5的File API读取文件信息

2024-08-13 02:39:54   221人阅读

html结构：

<div id="fileImage"></div>    <input type="file" value="upload" id="fileInput">    <p id="fileInfo"></p>

css样式：

 #fileImage{width: 300px;height: 300px; margin: 20px auto;background-repeat:  no-repeat ;background-position:  left top;background-size: contain; }        #fileInfo{border: 1px solid #eee;}

js代码：

var fileInput = document.getElementById("fileInput"),    fileImage = document.getElementById("fileImage"),     fileInfo = document.getElementById("fileInfo");        //监听change事件    fileInput.addEventListener(‘change‘,function(){        //清空预览区背景图片        fileImage.style.backgroundImage = ‘‘;        //检查文件是否选择        if(!fileInput.value){            fileInfo.innerHTML = "没有选择任何文件";            return;        }                //获取file的引用        var file = fileInput.files[0];                //获取file信息        fileInfo.innerHTML = ‘文件‘+file.name+‘<br>‘+                             ‘大小‘+file.size+‘<br>‘+                             ‘修改‘+file.lastModifiedDate+‘<br>‘;        if(file.type !== ‘image/jpeg‘ && file.type !== ‘image/png‘ && file.type !== ‘image/gif‘){            alert(‘不是有效的图片‘);            return;        }                //读取文件        var reader = new FileReader();        reader.onload = function(e){            var data =http://www.mamicode.com/ e.target.result;            fileImage.style.backgroundImage = ‘url(‘+data+‘)‘;        }         // 以DataURL的形式读取文件:        reader.readAsDataURL(file);    });

技术分享

选择文件之后可以看到文件的名称、大小、修改的时间，也可以预览图片。以DataURL的形式读取到的文件是一个字符串，类似于data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...，常用于设置图像。如果需要服务器端处理，把字符串base64,后面的字符发送给服务器并用Base64解码就可以得到原始文件的二进制内容。 以上是使用file API操作文件的例子，摘自廖老师的js教程。

file API借口总览

◆ FileList接口: 可以用来代表一组文件的JS对象，比如用户通过input[type="file"]元素选中的本地文件列表

◆ Blob接口: 用来代表一段二进制数据，并且允许我们通过JS对其数据以字节为单位进行“切割”

◆ File接口: 用来代步一个文件，是从Blob接口继承而来的，并在此基础上增加了诸如文件名、MIME类型之类的特性

◆ FileReader接口: 提供读取文件的方法和事件

FileList接口

  1. #FileList[index] // 得到第index个文件 

Blob接口

  1. #Blob.size // 只读特性，数据的字节数  
  2. #Blob.slice(start, length) // 将当前文件切割并将结果返回 

File接口

  1. #File.size // 继承自Blob，意义同上  
  2. #File.slice(start, length) // 继承自Blob，意义同上  
  3. #File.name // 只读属性，文件名  
  4. #File.type // 只读属性，文件的MIME类型  
  5. #File.urn // 只读属性，代表该文件的URN，几乎用不到，暂且无视 

FileReader方法

  1. #FileReader.readAsBinaryString(blob/file) // 以二进制格式读取文件内容  
  2. #FileReader.readAsText(file, [encoding]) // 以文本(及字符串)格式读取文件内容，并且可以强制选择文件编码  
  3. #FileReader.readAsDataURL(file) // 以DataURL格式读取文件内容  
  4. #FileReader.abort() // 终止读取操作 

FileReader事件

  1. #FileReader.onloadstart // 读取操作开始时触发  
  2. #FileReader.onload // 读取操作成功时触发  
  3. #FileReader.onloadend // 读取操作完成时触发(不论成功还是失败)  
  4. #FileReader.onprogress // 读取操作过程中触发  
  5. #FileReader.onabort // 读取操作被中断时触发  
  6. #FileReader.onerror // 读取操作失败时触发 

FileReader属性

  1. #FileReader.result // 读取的结果(二进制、文本或DataURL格式)  
  2. #FileReader.readyState // 读取操作的状态(EMPTY、LOADING、DONE)

  3. 对FileAPI实践的三点注意

    1. 由于规范尚未截稿，#File.urn尚存较大变数，webkit并未实现此特性

    2. #Blob.slice在webkit内核中加入了前缀，即#Blob.webkitSlice，且第二个参数不是“length”，而是“end”，话句话说，上面的示例二应改为file.webkitSlice(3, size)才能生效

    3. 规范中还明确规定了各种出错处理和异常处理，这些内容是同样重要的：不论对于一套完备的规范，还是对于一个健壮的程序而言 。

HTML5的File API读取文件信息


联系
我们