Dzwebs.Net

撰写电脑技术杂文十余年

FileReader的方法和事件

Admin | 2017-3-3 6:19:19 | 被阅次数 | 6006

温馨提示!

如果未能解决您的问题,请点击搜索;登陆可复制文章,点击登陆

  一、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=""/>'
      }
  }


该杂文来自: 网页制作杂文

上一篇:wordWrap:word-break:break-all和word-wrap:break

下一篇:canvas10倍压缩图片及传输base64

网站备案号:

网站备案号:滇ICP备11001339号-7

版权属性:

Copyright 2007-2021-forever Inc. all Rights Reserved.

联系方式:

Email:dzwebs@126.com QQ:83539231 访问统计