Html5笔记之第五天
Html5增强的文件上传域
<!DOCTYPE html>
<html>
<head>
<title>Html5增强的文件上传域</title>
</head>
<body>
<form>
上传文件（txt,单选）：<input type="file" id="file1" accept="txt/*" />
<input type="button" value="显示文件信息" onclick="showFile1()"><br/>
上传文件（txt,多选）：<input type="file" id="file2" accept="txt/*" multiple />
<input type="button" value="显示文件信息" onclick="showFile2()"><br/>
上传图片（image）：<input type="file" accept="image/*"><br/>
<input type="submit" value="submit"><br/>
<input type="reset" value="reset">
</form>
<script>
function showFile1(){
var file=document.getElementById("file1");
showFiles(file);
}
function showFile2(){
var file=document.getElementById("file2");
showFiles(file);
}
function showFiles(file){
var fileList=file.files;
for(var i=0;i<fileList.length;i++){
div=document.createElement("div");
div.innerHTML="第"+(i+1)+"个文件：文件名="+fileList[i].name+",文件类型="+fileList[i].type+",文件大小="+fileList[i].size;
document.body.appendChild(div);
}
}
</script>
</body>
</html>
var readFile=function(){
if(FileReader){
reader=new new FileReader();
}else{
alert("你的浏览器不支持FileReader");
}
reader.readAsText(document.getElementById("file1").files[0] , "gbk");
reader.onload = function()
{
document.getElementById("result").innerHTML = reader.result;
};
};
读文件--二进制流
reader.readAsBinaryString(document.getElementById("file1").files[0]);
读文件--DataURL
reader.readAsDataURL(document.getElementById("file1").files[0]);
Html5笔记之第五天的更多相关文章
- 【Unity Shaders】学习笔记——SurfaceShader（五）让纹理动起来
[Unity Shaders]学习笔记——SurfaceShader(五)让纹理动起来 转载请注明出处:http://www.cnblogs.com/-867259206/p/5611222.html ...
- VSTO学习笔记（十五）Office 2013 初体验
原文:VSTO学习笔记(十五)Office 2013 初体验 Office 2013 近期发布了首个面向消费者的预览版本,我也于第一时间进行了更新试用.从此开始VSTO系列全面转向Office 201 ...
- HTML5笔记3——Web Storage和本地数据库
上一篇:HTML5笔记2——HTML5音/视频标签详解 Web Storage概述 在HTML5中,除了Canvas元素之外,另一个新增的非常重要的功能是可以再客户端本地保存数据的Web Storag ...
- Nodejs学习笔记（十五）--- Node.js + Koa2 构建网站简单示例
目录 前言 搭建项目及其它准备工作 创建数据库 创建Koa2项目 安装项目其它需要包 清除冗余文件并重新规划项目目录 配置文件 规划示例路由,并新建相关文件 实现数据访问和业务逻辑相关方法 编写mys ...
- [转]Nodejs学习笔记（十五）--- Node.js + Koa2 构建网站简单示例
本文转自:https://www.cnblogs.com/zhongweiv/p/nodejs_koa2_webapp.html 目录 前言 搭建项目及其它准备工作 创建数据库 创建Koa2项目 安装 ...
- 深度学习课程笔记（十五）Recurrent Neural Network
深度学习课程笔记(十五)Recurrent Neural Network 2018-08-07 18:55:12 This video tutorial can be found from: Yout ...
- python3.4学习笔记(二十五) Python 调用mysql redis实例代码
python3.4学习笔记(二十五) Python 调用mysql redis实例代码 #coding: utf-8 __author__ = 'zdz8207' #python2.7 import ...
- Nodejs学习笔记（十五）—Node.js + Koa2 构建网站简单示例
前言 前面一有写到一篇Node.js+Express构建网站简单示例:http://www.cnblogs.com/zhongweiv/p/nodejs_express_webapp.html 这篇还 ...
- Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第五章：渲染流水线
原文:Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第五章:渲染流水线 学习目标 了解几个用以表达真实场景的标志和2D图像 ...
随机推荐
- Windows查看端口使用状况
使用端口是我们在进行远程或者打印机等都会遇到的,但是有很多用户会遇到端口被占用的情况,遇到这样的问题首先就要找出电脑中的所以端口然后进行查看,还是有很多人不知道该如何查看电脑端口. 1 查看windo ...
- MySQL学习笔记(一)：SQL基础
定义:SQL即Structure Query Language(机构化查询语言)的缩写,是使用关系数据库的应用语言. 包括三个类别: (1):DDL(Data Definition Language) ...
- tcp netstat用法 TIME_WAIT状态解析 MTU以及MSS
带着问题写博客 问题1:使用netstat查看有源TCP连接的状态时,经常会看到established状态,那么还有哪些状态,这些状态是如何变化的呢? 问题2:TIME_WAIT状态存在的必要? 问题 ...
- tomato dualwan /root目录的特殊用途
测试发现tomato dualwan /root目录下存储的文件重启后会自动清掉.利用这个特性可以把测试生成的临时文件丢到这里. root下本应该存在的.vimrc 文件 采用如下方法生成: 在/op ...
- MySQL_第三方数据库引擎_tokudb
前阵子迁移zabbix到tokudb,整理部分操作笔记到这篇博文. 如果转载,请注明博文来源: www.cnblogs.com/xinysu/ ,版权归 博客园 苏家小萝卜 所有.望各 ...
- 花了一年时间开发的TTFEditor 字体编辑器
TTF(True Type Font)字库是微软定义的基于windows的标准字库格式.但其由于专利保护以及无法跨平台导致TTF字库在实际应用中无法有效使用. 为此我推出TTFEditor字体编辑软件 ...
- hexo博客MathJax公式渲染问题
这个问题自己很早以前便碰到了,用MathJax语法写的一些公式,在本地Markdown编译器上渲染是没问题的,可是部署到hexo博客中就出现问题了,之前我是使用图片代替公式应付过去了,今天从网上找了一 ...
- [补档][JLOI 2017]聪明的燕姿
[NOI 2008]假面舞会 题目 阴天傍晚车窗外 未来有一个人在等待 向左向右向前看 爱要拐几个弯才来 我遇见谁会有怎样的对白 我等的人他在多远的未来 我听见风来自地铁和人海 我排着队拿着爱的号码牌 ...
- POJ 2393 Yogurt factory 贪心
Description The cows have purchased a yogurt factory that makes world-famous Yucky Yogurt. Over the ...
- UITabbarController左右滑动切换标签页
UITabbarController左右滑动切换标签页 每个Tabbar ViewController都要添加如下代码,建议在基类中添加:ViewDidLoadUISwipeGestureRecogn ...