1.File API

一直以来，不能直接访问用户计算机中的文件都是web应用开发当中的一大障碍。File API的宗旨是为web开发人员提供一种安全的方式，以便在客户端访问用户计算机中的文件，并更好的对这些文件进行操作。

HTML5在DOM中为文件输入元素添加了一个files的集合，在通过文件输入字段选择了一个或多个文件时，files集合中将包含一组File对象 ，每个File对象对应着一个文件，每个File对象都有下列只读对象。

name：本地文件系统中的文件名。

size：文件的字节大小

type： 字符串，文件的MIME类型

lastModifiedDate： 文件上一次被修改时间

window.onload = function() {

var filesList = document.getElementById("fileList");

filesList.addEventListener('change', function(event) {

var files = event.target.files,

i=0,

len = files.length;

while(i

alert(files[i].name);

i++;

}

});

};

不过file API的功能不仅仅如此，通过他提供的FIleReader类型甚至还可以读取文件中的数据

FileReader类型实现的是一种异步文件读取机制，方法如下：

1.readAsText(file，encoding)  以纯文本形式读取文件，将读取的文件保存到result属性中。

2.readAsDataURL(file)  读取文件将文件以数据URI的形式保存在result中

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

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

window.onload = function() {

var filesList = document.getElementById("fileList");

filesList.addEventListener('change', function(event) {

var info ="",

output=document.getElementById("output"),

progress=document.getElementById("progress"),

files = event.target.files,

type= "default",

reader = new FileReader();

if(/image/.test(files[0].type)){

reader.readAsDataURL(files[0]);

type="image";

}else{

reader.readAsText(files[0]);

type="text";

}

reader.error=function(){

output.innerHTML="Could not read file"+reader.error.code;

};

reader.οnprοgress=function(event){

if(event.lengthComputable){

progress.innerHTML=evnet.loaded+"/"+event.total;

}

};

reader.οnlοad=function(){

var html="";

switch(type){

case "image":

html="";

break;

case "text":

html=reader.result;

break;

}

output.innerHTML = html;

};

});

};

output--

progress--

这个读取过程是异步的，因此FileReader也提供了几个事件：

1.progress  是否又读取了新数据

2.error  是否发生错误

3.load 是否已经读取完整个文件。

HTML5 File API — 让前端操作文件变的可能

前言 在 HTML5 File API 出现之前,前端对于文件的操作是非常有局限性的,大多需要配合后端实现.出于安全角度考虑,从本地上传文件时,代码不可能获取文件在用户本地的地址,所以纯前端不可能完成 ...

Resumable.js – 基于 HTML5 File API 的文件上传

Resumable.js 是一个 JavaScript 库,通过 HTML5 文件 API 提供,稳定和可恢复的批量上传功能.在上传大文件的时候通过每个文件分割成小块,每块在上传失败的时候,上传会不断 ...

HTML5 File api 实现断点续传

目前市场上大多数的网站的断点上传都是需要安装浏览器插件的,本文就针对高级浏览器的环境下,通过HTML5 File api实现断点上传进行说明 一.实现文件多选 HTML5的新 ...

HTML5 file api读取文件的MD5码工具

1.工具的用途:用HTML5 file api读取文件的MD5码.MD5码在文件的唯一性识别上有很重要的应用,业内常用MD5进行文件识别.文件秒传.文件安全性检查等: 2.适用性:IE.Chrome皆 ...

HTML5 File API 全介绍

在 HTML5 File API 出现之前,前端对于文件的操作是非常有局限性的,大多需要配合后端实现.出于安全角度考虑,从本地上传文件时,代码不可能获取文件在用户本地的地址,所以纯前端不可能完成一些类 ...

HTML5 File API的应用

HTML5 File API简介 HTML5File API协议族 Directories and System   文件系统和目录读取 FileWriter   写入文件 FileReader   ...

HTML5 file API加canvas实现图片前端JS压缩并上传

一.图片上传前端压缩的现实意义 对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 这种体验包括两方面: 由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅 ...

图片上传插件ImgUploadJS：用HTML5 File API 实现截图粘贴上传、拖拽上传

一 . 背景及效果 当前互联网上传文件最多的就是图片文件了,但是传统web图片的截图上传需要:截图保存->选择路径->保存后再点击上传->选择路径->上传->插入. 图片 ...

HTML5 File API解读

1,概述 Web应用应该具备处理广泛用户输入问题的能力,例如在Web富应用中,用户希望上传文件到服务器.File API定义了访问文件的基本操作途径,包括文件.文件列表集.错误处理等,同时,File ...

随机推荐

[LeetCode] Summary Ranges 总结区间

Given a sorted integer array without duplicates, return the summary of its ranges. For example, give ...

Android成长日记-ViewPager的使用

ViewPager在安卓应用中主要用于作为程序的引导页面,欢迎页面,以及其他的动画效果,下面将给你讲述ViewPager的使用 在Android3.0以上的Api中,提供了ViewPager的接口,所 ...

C/S架构程序多种类服务器之间实现单点登录(转)

(一) 在项目开发的过程中,经常会出现这样的情况:我们的产品包括很多,以QQ举例,如登陆.好友下载.群下载.网络硬盘.QQ游戏.QQ音乐等,总不能要求用户每次输入用户名.密码吧,为解决这个问题,高手提 ...

[iOS基础控件 - 6.7.1] 微博展示 代码

Controller: // // ViewController.m // Weibo // // Created by hellovoidworld on 14/12/4. // Copyrig ...

android图片处理方法(转)

//压缩图片大小 public static Bitmap compressImage(Bitmap image) { ByteArrayOutputStream baos = new ByteArr ...

Page_Load接收随机参数放到字典类中

Page_Load接收随机参数放到字典类中,可以用作签名.普通的接收url的参数可以用作下面这种模式:  int appid =Convert.ToInt32(param["appid&qu ...

欲练JS，必先攻CSS——前端修行之路

今天我讲的主题是css,具体聊一下我大概的css学习历史,分享一些干货,希望这次分享对大家有所启发和帮助. 个人的css历史: 说说自己的css学习的历史,12年,当时是老师手把手1对1教我div+f ...

pip无法正常使用卸载并重新安装

错误提示 ➜ ~ pip Traceback (most recent call last): File "/usr/bin/pip", line 11, in

自动化测试之selenium工具简单介绍

一.selenium简单介绍 1.selenium的成员 2.selenium工作原理 二.webdrive 常见元素定位