js文件处理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.οnerrοr=function(){

　　//出错时执行

}

reder.οnprοgress=function(){

//有加载新数据时执行

}

reder.οnlοad=function(){

　　if（type=='image'）{

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

　　}else if(type='text'){

　　　　var html=reader.result

　　}

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

}

更多专业前端知识，请上【猿2048】www.mk2048.com

js文件处理File相关推荐

html5 文件转byte[],JS 文件base64、File、Blob、ArrayBuffer互转
二进制互转 1. file对象转base64let reader = new FileReader(); reader.readAsDataURL(file[0]) console.log(reade ...
js获取input file框（文件上传框）内容，上传后台
直接复制,修改jquery为你的本地路径,本js可以把file选择的图片,转化为base64对象.无论是回显,还是转成图片,或者直接上传后台都是可以滴. <!DOCTYPE html> & ...
js文件上传以及js清空input file值
最近项目中遇到文件上传的案例, 之前涉及文件上传的较少, 今天针对js文件上传的案例做一个详细的教程,方便日后查阅! 本教程从原生JS, jQuery, 两处着手简单介绍文件上传案例 1.原生JS ...
Eclipse编辑jsp、js文件时，经常出现卡死现象解决汇总
使用Eclipse编辑jsp.js文件时,经常出现卡死现象,在网上百度了N次,经过N次优化调整后,卡死现象逐步好转,具体那个方法起到作用,不太好讲.将所有用过的方法罗列如下: 1.取消验证 windo ...
js文件引用方式及其同步执行与异步执行
详见: http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp74 任何以appendChild(scriptNode) 的方式引入的j ...
php动态引入js文件路径问题,JavaScript_动态加载外部css或js文件，原理解析：第一步：使用dom创 - phpStudy...
原理解析:第一步:使用dom创建应用:1.提高代码的复用,减少代码量:2.添加一个javascript控制器和 session可以实现动态改变页面样式:3.由于是页面是从上到下依次加载文件的,并且边 ...
iOS native集成Weex js文件不显示提示框问题
问题: iOS集成0.15.1版本的WeexSDK,编译器Xcode9.2,加载js文件提示框不显示问题. 如图:不显示提示框: 正常情况下: 解决方法:找到项目的info.plist,删除Main ...
vue js 定义对象_JS标准内置对象Proxy及Vue中的proxy.js文件
昔登铜井望法华,葱茏螺黛浮蒹葭.今登法华望铜井,湖水迷茫烟色瞑.-- <登法华寺山顶> Proxy是什么 Proxy是JS标准内置对象中的一个对象.用于创建一个对象的代理.从而实现对对象操 ...
javascript:重新加载js文件
//重新加载js文件 function loadJs(file) { var head = $("head").remove("s ...

js文件处理File

js文件处理File相关推荐

最新文章

热门文章