大众计算机学习网欢迎诸位!收藏本站注 册登 陆
常用教程:基础知识网络知识操作系统WPS网页制作数据库算法网页成功之路网络安全最新技术古典mid流行midmid背景下载中心
您现在的位置:首页 > 教程 > 文章页

FileReader的方法和事件

Admin | 2017-3-3 6:19:19 | ReadNums | 356 | 标签 网页制作 | 打印本页
     

  一、FileReader的方法

  abort     中断读取

  readAsText(file, [encoding])     将文件读取为文本

  该方法有两个参数,其中第二个参数是文本的编码方式,默认值为 UTF-8。这个方法非常容易理解,将文件以文本方式读取,读取的结果即是这个文本文件中的内容。

  readAsBinaryString(file)     将文件读取二进制码

  通常我们将它传送到后端,后端可以通过这段字符串存储文件

  readAsDataURL(file)     将文件读取为DataURL

  将文件读取为一串Data URL字符串,将小文件以一种特殊格式的URL地址直接读入页面。小文件指图像与html等格式的文件。

  二、FileReader事件

  onabort     数据读取中断时触发

  onerror     数据读取出错时触发

  onloadstart     数据读取开始时触发

  onload     数据读取成功完成时触发

  onloadend     数据读取完成时触发,无论成功失败

  三、代码示例

  var result = document.getElementById("result");
  var input = document.getElementById("file_input");

  if(typeof FileReader === 'undefined'){
      result.innerHTML = "抱歉,你的浏览器不支持 FileReader";
      input.setAttribute('disabled','disabled');
  }else{
      input.addEventListener('change',readFile,false);
  }
            
  function readFile(){
     var file = this.files[0];
     if(!/image\/\w+/.test(file.type)){
         alert("请确保文件为图像类型");
         return false;
     }
     var reader = new FileReader();
     reader.readAsDataURL(file);
     reader.onload = function(e){
         result.innerHTML = '<img src="'+this.result+'" alt=""/>'
      }
  }


问题未解决:在线咨询我要在线咨询问题

网友评论

(访客)
内容实用原创,讲得很好。
20xx年x月x日
(站长)
有问题请在线咨询。
20xx年x月x日