`
zhangyaochun
  • 浏览: 2614246 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

html5之文件api

阅读更多

这篇主要是探讨一下HTML 5的文件API

 

1、FileList对象与file对象

 

 

  • FileList对象表示用户选择文件的列表,在HTML 5中,加了multiple属性,file控件允许放置多个文件
  • 控件内的每一个用户选择的文件都是一个file对象
  • FileList对象是这些file对象的列表
  • file对象有两个属性name属性表示文件名,不包括路径 | lastModifiedDate属性表示文件的最后修改日期 
html:

<input type="file" id="file"/>
 
js:

//下面返回的是FileList
var files = document.getElementById('file').files;
var size = files[0]. size;
var type= files[0]. type;
var name= files[0]. name;
 

HTML5 已经对file控件增加了accept属性,只接受某种类型的文件

<input type="file" accept="image/*" id="file" />
 


 
关于FileReader可以查看我写的http://zhangyaochun.iteye.com/blog/1487900
  • 大小: 13.7 KB
1
0
分享到:
评论

相关推荐

    HTML5 api 调用示例

    HTML5 API调用示例是现代网页开发中的关键部分,它极大地扩展了Web应用程序的功能,使其可以实现更多原生应用的特性。W3C(万维网联盟)是定义HTML5标准的权威组织,它的API规范为开发者提供了丰富的工具集,以创建...

    twaver-html5-5.9.0-api_html5_-5.9.0-api_twaver_

    标题中的"twaver-html5-5.9.0-api_html5_-5.9.0-api_twaver_"似乎是指一个基于HTML5的Twaver版本5.9.0的应用程序接口(API)文档。Twaver是一个强大的数据可视化和网络建模工具,广泛应用于网络拓扑、流程图、组织...

    html5_API文档

    6. Drag and Drop:HTML5的拖放API允许用户在网页上直接拖放元素,提高了交互性,适用于文件上传、内容排序等功能。 7. Web Workers:为了解决JavaScript单线程执行导致的性能问题,HTML5引入了Web Workers,它们在...

    ch06HTML5媒体API项目.rar

    本次实验主要包含了两个基于HTML5媒体API的应用设计实例,一是基于HTML5音频API的音乐播放器的设计与实现,二是基于HTML5视频API的在线教学视频的设计与实现。要求做基于HTML5音频API的音乐播放器的设计与实现,基于...

    Webapi 文件上传

    在前端,可以使用HTML5的`FormData`对象和`XMLHttpRequest`或`fetch` API来发送文件。下面是一个简单的JavaScript示例: ```html 上传 document.getElementById('uploadForm').addEventListener('submit', ...

    .NET webapi实现文件上传功能

    本文将深入探讨如何在WebAPI中实现文件上传功能,并介绍如何在MVC应用程序中调用这个API。 一、WebAPI中的文件上传 1. **配置路由**:首先,我们需要在WebAPI的`WebApiConfig.cs`文件中设置允许接收多部分/表单...

    调用WebApi接口上传文件

    总结,通过.NET MVC调用WebApi接口进行文件上传涉及客户端HTML表单的创建、服务器端MVC控制器和WebApi控制器的配置以及文件的接收和处理。在实际项目中,还要注意性能优化、错误处理和安全性检查,以提供稳定可靠的...

    html5关于文件处理的api介绍

    1. **FileList对象**:FileList是一个文件对象的集合,通常由HTML文件输入元素`&lt;input type="file"&gt;`生成。在HTML4中,用户只能选择一个文件,但在HTML5中,通过添加`multiple`属性,用户可以选择多个文件。每个文件...

    Leaflet.FileLayer, 使用HTML5文件API将文件本地( GeoJSON,KML,GPX ) 加载为层.zip

    Leaflet.FileLayer, 使用HTML5文件API将文件本地( GeoJSON,KML,GPX ) 加载为层 Leaflet.FileLayer使用 API 将本地文件加载到映射中,不需要服务器调用就可以加载 !简单的地图控件用户可以在本地浏览文件它被本地...

    Html5 file_api

    HTML5 文件API 文件上传 支持拖拽的文件上传

    HTML5演示+Canvas_2D_API+css3.0API

    在给定的压缩包文件中,我们关注的重点是HTML5的Canvas 2D API和CSS3.0 API。 Canvas 2D API是HTML5的一个重要组成部分,它提供了一个在网页上绘制图形、图像、文字等元素的JavaScript接口。通过这个API,开发者...

    HTML5分割上传文件

    HTML5是现代网页开发的重要标准,它引入了许多新特性,其中一项便是改进了文件上传功能。在传统的HTTP表单上传中,如果用户尝试上传大文件,可能会遇到速度慢、网络中断或者服务器处理压力过大的问题。为了解决这些...

    FastAPI后端查询数据在前端进行分页展示(html、py文件)

    在`templates`目录中,你将有HTML文件,比如`index.html`,它会包含LayUImini的模板代码,用于展示数据和分页控件。前端页面通过AJAX请求与后端通信,获取数据并渲染到表格中。在JavaScript中,你可以使用LayUI的`...

    关于HTML5+ API plusready的兼容问题

    在5+ Runtime环境中,通常情况下需要html页面解析完成后才会注入5+ API,执行的顺序为: 1. 加载html页面 2. 解析html页面(下载script/link等节点引用的资源,如js/css文件) 3. 触发DOMContentLoaded事件 4. 注入5...

    archunit-junit5-api-0.14.1-API文档-中文版.zip

    赠送jar包:archunit-junit5-api-0.14.1.jar;...使用方法:解压翻译后的API文档,用浏览器打开“index.html”文件,即可纵览文档内容。 人性化翻译,文档中的代码和结构保持不变,注释和说明精准翻译,请放心使用。

    html5文件上传中文文档

    在探讨HTML5文件上传中文文档时,我们将重点介绍HTML5提供的文件操作API,这是一个强大的功能集合,使得在浏览器端操作文件变得更加方便和安全。文档中提到了几个关键的概念和API,包括File API、FileReader API、...

    vb API帮助文件

    `vbapi.chm`可能是一个包含VB API相关函数和方法的离线帮助文档,`.chm`是Microsoft的帮助文件格式,用于存储HTML和相关资源,便于用户查找和学习API的使用方法。 `VisualBasic手册.chm`很可能是Visual Basic的官方...

    RED5 API html

    RED5 API html是一个关于RED5开源流媒体服务器的API文档,以英文HTML格式提供的压缩文件。RED5是一款基于Java开发的服务器,它支持实时传输协议(RTMP)、Real-Time Messaging Protocol(RTMFP)以及HTTP直播(HLS)...

    前端分段传输大文件组件,基于HTML5 File API、Blob,后端采用node接收文件.zip

    本文将详细探讨如何使用HTML5的File API和Blob对象在前端实现大文件的分段传输,以及如何在后端使用Node.js来接收并处理这些分片数据。我们将围绕"前端分段传输大文件组件,基于HTML5 File API、Blob,后端采用node...

    Asp.Net WebApi 上传文件方法(原生js上传和JQ ajax上传)

    对于原生JavaScript的文件上传,我们可以使用HTML5的`FormData`对象和`XMLHttpRequest`。以下是一个基本的示例: ```javascript var fileInput = document.getElementById('fileInput'); var formData = new ...

Global site tag (gtag.js) - Google Analytics