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图像 ...
随机推荐
- Selenium对浏览器支持的版本
最新的selenium与几种常用浏览器的版本兼容情况: selenium 3.4.0 : Mozilla GeckoDriver 0.18 -- Firefox 53 - 56 Google Ch ...
- 关于前端的photoshop初探的学习笔记
写在前边 这还是高三的时候暑假的时候学习这个软件时记的笔记呢,今天又在电脑上找到了它,总觉得不应该让他尘封在我的硬盘上,于是挂了出来.温馨提示:比较乱,写给自己看的,看不下去,按ctrl+W 笔记内容 ...
- java集合练习
分组练习: List<List<Student>> list=new ArrayList<List<Student>>();这个是二维集合,分组的时候 ...
- vue.js中使用Axios
Axios为vue2.0官方推荐HTTP请求工具,之前的是vue-resource 在使用的过程中总结了两种使用方式: 1.和vue-resource使用类似 引入:import axios from ...
- DDD理论学习系列（12）-- 仓储
DDD理论学习系列--案例及目录 1. 引言 DDD中Repository这个单词,主要有两种翻译:资源库和仓储,本文取仓储之译. 说到仓储,我们肯定就想到了仓库,仓库一般用来存放货物,而仓库一般由仓 ...
- Android与NativeC传递数据不正确问题
操作系统:Windows8.1 显卡:Nivida GTX965M 开发工具:Android studio 2.3.3 这两天一直在调试一个BUG,具体为通过 NativeC 来处理上层Android ...
- Github上比较流行的PHP扩展库项目
这里列出比较常用的PHP开源扩展库项目: swoole, C扩展实现的PHP异步并行网络通信框架,可以重新定义PHP.过去PHP只能做Web项目,现在有了Swoole.任意服务器端程序都可以用PHP来 ...
- Wamp之mysql密码故事
注:有时候修改mysql密码会出现如下状况:密码改了,但新密码就是进不进去. 原因大概是语法错误.例如: >update user set password='hooray' where use ...
- 31. leetcode 122. Best Time to Buy and Sell Stock II
122. Best Time to Buy and Sell Stock II Say you have an array for which the ith element is the price ...
- POJ 2386 Lake Counting （简单深搜）
Description Due to recent rains, water has pooled in various places in Farmer John's field, which is ...