首页
学习
活动
专区
工具
TVP
发布

HTML5File API

说到File API,比如有意思就是图片上传了。国外有一个网站叫min.us  用户只需要把图片拖到网页面中,然后自己进行排序就OK了,很方便。...而HTML5FileReader对象与as3中很像,只不过目前as3中方法比这个多(有兴趣可以自己去看看adobelives docs,对比一下两者区别与共同点)。...讲了这么多,回到正题:File API,拿图片上传为例(File、FileReader): 1、首先,如何控制用户单选、多选。...HTML5中允许选择多个文件: 只允许上传一个文件: 2、如何让用户只能上传指定文件格式...关于定义配置规则,可以参考这一篇文章:nginx下php获取自定义请求头参数方法 搜索了很多关于html5 upload例子,有人用.net、ruby写了,但没有找到用php写(有是有,不过是使用提交

1.8K20
您找到你想要的搜索结果了吗?
是的
没有找到

HTML5:File API

H5 提供了一组简洁有效文件操作接口:File API 主要涉及: FileList:用户通过file控件或拖拽选择一组文件; File:FileList里面放就是File; Blob:代表一段二进制数据...,File就是继承自Blob; FileReader:用于从File、Blob中读取数据; FormData:用Ajax实现上传、进度显示时会用到; 特别注意: H5 File API 虽然可以让我们访问本地文件系统...,但只能被动地读取,也就是说只有用户主动触发了文件读取行为(比如通过file控件选择选择文件或拖拽文件),才能访问到File API; 浏览器兼容性(意料之中...IE必然不靠谱...): ?...(Blob|File): 用于将 Blob 或 File 对象,转换为一个基于base64编码Data URL对象。...示例3:文件上传时展示进度 XMLHttpRequest 在 HTML5 规范中引入了几个新特性: 上传或者下载中进度事件(onprogress); 支持上传文件(File、Blob、FormData

87131

HTML5API

HTML5就是牛,可以直接播放音视频,还可以作图; 一、HTML5中播放视频和音频:   加载时直接播放音频方式:new Audio("BY2.mp3").play(); <...} g>text{ font-family: sans-serif;font-size: 6pt; } js: 三、HTML5...   IE9之前版本浏览器不支持;   修改绘制图形就必须把当前擦除在重新绘制,而使用SVG绘制图形,可以通过简单移除相应元素来修改图片;...setTimeout setInterval()等;测试时发现不支持doucment.get*等函数,可能还不支持文档交互,但是已经支持log输出(chrome); 六、二进制数据Blob和文件系统API...:   1、Blob对象是JavaScript中代表二进制数据对象;提供了操作二进制数据接口,在其基础上,实现了FielList对象、File对象、FileReader对象等操作文件API;在支持

48110

HTML5学习—Canvas API入门

但是HTML5 Canvas出来之后,很多动态生成或者展示图形、图表、图像或者动画功能都由Canvas来完成。...Canvas缺点:用Canvas绘制出来对象不属于页面DOM结构或者任何命名空间 Canvas优点: 1.不需要将所有绘制图像中每个元素当做对象存储,因此执行性能非常好 2.Canvas API...通过获取上下文(context),执行一些动作,可以完成图形绘制和动画功能。canvas只是一个标签,后面强大功能是通过Javascript API完成。...处理老浏览器不支持HTML5 Canvas元素问题,可以在canva标签里面添加内容,当然也可以使用Modernizr 类库进行不同浏览器之间兼容操作。... 您浏览器不支持HTML5 Canvas,请升级您浏览器 . 3.一个简单Canvas Demo

55530

html5 文件api使用示例

DOCTYPE html> html5文件API <script type="text/javascript...// 返回 FileList对象 var files = file.files; for(i=0;i<files.length;i++){ //获取文件<em>的</em>名称...类型 限制 上传<em>的</em>类型 ,用正则表达式验证 */ var type =file.files[0].type;//文件<em>的</em>类型 image/png,image/jpeg,text/plain...-- <em>html5</em>为文件域添加multiple="multiple"支持多文件上传,用逗号分隔 --> 附件:<input type="file" id="file" multiple="multiple...-- 添加accept属性 限制要选择<em>的</em>文件<em>的</em>类型,但只是在打开文件选择那一刻筛选出符合条件<em>的</em>文件 ,例如:下面要求文件类型为图片,打开文件选择框时只会列出所有的图片文件; 具体情况各大浏览器支持不一样

68820

HTML5这些api你知道吗?

以下是之前学习一些HTML5 API总结,在HTML5中有许多功能和接口很值得我们去了解和学习。...--link Prefetching Page Visibility 页面可见性APIAPI可以用来检测页面对于用户可见性,即返回用户当前浏览页面或标签tap状态变化。...Full Screen API全屏APIAPI允许开发者以编程方式将Web应用程序全屏运行,使Web应用程序更像本地应用程序。十分简单有用api....全屏api目前可能存在兼容性问题,但相信不久将来肯定会是一个使用频率超高api getUserMedia APIAPI允许Web应用程序访问摄像头和麦克风,而无需使用插件,该API在客户端最先支持...这样的话我们就可以使用本地播放器来播放。 电池API(Battery API) 这是一个针对移动设备应用程序API,主要用于检测设备电池信息。

1.3K60

妙趣横生HTML5 Page Visibility API

Jeff 在第一次看到时候就知道这种效果是通过HTML5 Page Visibility API 实现(不是吹牛)。 ?...直到现在我还没去查看36kr 源代码看其是如何实现(也不打算去一个个查看它繁杂js 文件了),HTML5 Page Visibility API 以前看过,看到36kr 实现了这个时候一时兴起...”;虽然我一直认为好技术文不应该过多复制API 文档内容,但在这里还是从自己角度为没接触过这个Page Visibility API 同志们解析下。...HTML5 那帮搞标准也适时提出了这个Page Visibility API——以期更好地利用这个“时隐时现”动作。...Page Visibility API使用方法 Page Visibility API 有两个相关属性:document.visibilityState及document.hidden。

90070

HTML5这些api你知道吗?

本文作者:IMWeb coverguo 原文出处:IMWeb社区 未经同意,禁止转载 以下是之前学习一些HTML5 API总结,在HTML5中有许多功能和接口很值得我们去了解和学习。...--link Prefetching Page Visibility 页面可见性APIAPI可以用来检测页面对于用户可见性,即返回用户当前浏览页面或标签tap状态变化。...Full Screen API全屏APIAPI允许开发者以编程方式将Web应用程序全屏运行,使Web应用程序更像本地应用程序。十分简单有用api....全屏api目前可能存在兼容性问题,但相信不久将来肯定会是一个使用频率超高api getUserMedia APIAPI允许Web应用程序访问摄像头和麦克风,而无需使用插件,该API在客户端最先支持...这样的话我们就可以使用本地播放器来播放。 电池API(Battery API) 这是一个针对移动设备应用程序API,主要用于检测设备电池信息。

84770

HTML5 性能监控 timing API 解释

timing API统计了一个浏览器窗口从 卸载当前页面开始 到 加载完毕目标页面的整个流程中,每个节点时间戳 具体都有哪些时间节点呢?...下面是很详细示意图 各个节点示意图 各个节点含义 navigationStart 当访问一个新页面时,当前页面卸载完成所返回时间点,如果没有当前页面,则返回fetchStart时间点 unloadEventEnd...如果要打开页面和当前页面同源,则返回用户unload事件执行完成后时间点,如果当前文档不存在或者不同源,则返回0 redirectStart 如果是HTTP重定向,如果跳转都是同源,则返回开始获取发起重定向时间点...,否则返回0 redirectEnd 如果是同源重定向,返回重定向请求接收完最后一字节时间点,否则返回0 fetchStart 如果请求是用http get发起,返回浏览器查缓存之前时间点...load事件执行之前时间点,否则为0 loadEventEnd 返回浏览器触发load事件执行完成时间点

1.1K60
领券