javascript 操作file文件

javascript 操作file文件

支持File API的浏览器有IE10+,Firefox3.5+,Opera10.6+,Safari5+,Chrome。

1.在表单元素上<input type="fiel" name="file" id="file"/>,可以选择一个或多个文件,通过获取文件元素对象的集合files,来操作每一个对象files[i];

用法:DOM操作

var files=document.getElementById("file");

  var file=files.files;//每一个file对象对应一个文件。

  file.name//获取本地文件系统的文件名。

  file.size//文件的字节大小。

  file.type//字符串类型,文件的MIME类型。

  file.lastModifiedDate//文件的最后修改时间。(只使用于Chrome浏览器)

2.通过FileReader类型读取文件中的数据(异步文件读取)

FileReader有一下几种读取文件数据的方法

1).readAsText(file,encoding);以纯文本的形式读取文件,将读取到的文件保存到result属性。encoding参数用于指定编码类型,是可选的。

2).readAsDataURL(file);读取文件并将文件数据以URL形式保存到result属性中。(读取图像文件常用方法)

3).readAsBinaryString(file);读取文件并将一个字符串保存在result属性中,字符串中的每个字符表示一字节。

4).readAsArrayBuffer(file);读取文件并将一个包含文件内容的ArrayBuffer保存在result属性中。

3.FileReader提供了几个事件最有用的三个事件,progress,error,load,分别表示是否又读取了新数据,是否发生了错误,是否已经读完整个文件。

使用方法:


var reader=new FileReader();

if(/image/.test(file[0].type)){//操作图像
  reader.readAsDataURL(file[0]);
  var type='image';
}else{//操作文本
  read.readAsText(file[0]);
  var type='text';
}
reader.onerror=function(){
  //出错时执行
}
reder.onprogress=function(){
//有加载新数据时执行
}

reder.onload=function(){

  if(type=='image'{

    var html="<img src=\" "+reader.result+" \">";//已经加载完了执行

  }else if(type='text'){

    var html=reader.result

  }

  Obj.innerHTML=html;//显示在指定元素对象上

}

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值