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.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;//显示在指定元素对象上
}
js文件处理File的更多相关文章
- Resumable.js – 基于 HTML5 File API 的文件上传
Resumable.js 是一个 JavaScript 库,通过 HTML5 文件 API 提供,稳定和可恢复的批量上传功能.在上传大文件的时候通过每个文件分割成小块,每块在上传失败的时候,上传会不断 ...
- js 实现 input file 文件上传
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat=&qu ...
- JQuery 加载 CSS、JS 文件
JS 方式加载 CSS.JS 文件: //加载 css 文件 function includeCss(filename) { var head = document.getElementsByTagN ...
- #iOS问题记录#动态Html加载本地CSS和JS文件
所谓动态Html,指代码中组合生成的html字符串: 若需要加载本地CSS,图片,JS文件,则, 1,需要文件的全路径: 2,需要"file:///"标志: 例如: //获取文件全 ...
- 使用T4模板合并js文件
不知道该怎么表达,或许直接贴图贴代码更好 前因:在第一个使用angularjs的项目中我将所有的controller写到一个文件里面,深知维护起来那滋味,所以再次使用angularjs的时候,我便把所 ...
- grunt压缩js文件
grunt是node中很好的管理项目的工具,利用它可以实现对整个项目的管理,避免很多重复性的工作如合并.压缩,检查语法等. 使用grunt首先要安装node环境,nodejs官网http://node ...
- uglifyjs2压缩混淆js文件
uglifyjs可以用来压缩混淆js文件,发布release版本应用利器.在StackOverflow浏览了一下,相比Google Closure和YUI compressor,uglifyjs被推荐 ...
- js文件合并,压缩,缓存,延迟加载
做web前段也有一段时间了,对于web中js文件的加载有些体会想跟大家一起分享一下. 1.首先说说js文件的合并和压缩吧 为了便于集中式管理js的合并和压缩我们创建一个Js.ashx文件来专门处理合并 ...
- Eclipse spket插件 内置js文件
这一篇将怎么在spket内置js文件,而不用用户自己去添加. 1. 在开发的Eclipse的 运行配置将下面几个插件勾选上. 2. 在org.eclipse.ui.startup拓展里执 ...
随机推荐
- Java设计模式—门面模式(带案例分析)
1.门面模式的定义: 门面模式(Facade Pattern)也叫做外观模式,是一种比较常用的封装模式,其定义如下: 要求一个子系统的外部与其内部的通信必须通过一个统一的对象进行.门面模式 ...
- ArcGIS 10.3编译旧版本Addin错误的解决办法
ArcGIS10.2下VS2010的AddIn,在10.3下在VS2012下重新编译出现missing ESRI ArcGIS Add-in SDK错误,导致无法生成esriAddIn安装文件. 该问 ...
- Zygote和System进程的启动过程
##init脚本的启动 +------------+ +-------+ +-----------+ |Linux Kernel+--> |init.rc+-> |app_process| ...
- LeetCode刷题系列——Add Two Numbers
题目链接 这个题目很简单,归并而已,好久没练编程,居然忘了在使用自定义类型前,要进行初始化(new操作). class ListNode{ int val; ListNode next; ListNo ...
- JS高级程序设计第三版——在HTML中使用JavaScript
使用<script>元素的方式 外部引用式.行内式.嵌入式. JavaScript引用放在<body>后面的原因 假如在文档的<head>元素中包含所有JavaSc ...
- Tomcat无法正常启动start.bat 一闪而过、只显示USING 故障排除
在云主机上配置tomcat的时候遇到的问题. 1. 开始的时候我将自己用的tomcat6绿色版打包放到了主机上,当我打开bin下面的时候startup.bat时,控制台一闪而过,查看log文件没有任何 ...
- ubuntu或者debian安装php-gd扩展错误
‘./configure’ ‘–prefix=/usr/local/php’ ‘–with-config-file-path=/etc’ ‘–with-mysql=/usr/local/mysql’ ...
- Qt 窗口移动实现
很多人觉得系统自带的标题栏太丑了,想要自绘一个标题栏,去掉了系统自带的标题栏后,就需要自己实现窗口移动,下面的代码就是实现窗口移动. widget.h #ifndef WIDGET_H #define ...
- 初识EMC
EMC,即电磁兼容,是指设备在预期的电磁环境中,能按设计要求正常抵抗电磁干扰的能力.其主要包含3个方面:电磁干扰(EMI),电磁抗扰(EMS)与静电放电抗扰(ESD). 电磁干扰的方式可以大概分为传导 ...
- simple2.py
#coding: utf-8 import xlsxwriter workbook = xlsxwriter.Workbook('chart.xlsx') worksheet = workbook.a ...