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图像 ...
随机推荐
- maven：pom.xml中没有dependency标签错误
dependency的标签是包含在dependencies中的.
- SpringMVC源码情操陶冶-AbstractHandlerExceptionResolver
springmvc支持服务端在处理业务逻辑过程中出现异常的时候可以配置相应的ModelAndView对象返回给客户端,本文介绍springmvc默认的几种HandlerExceptionResolve ...
- win10安装sqlserver2016准备
win10安装sql server2016需要注意: 一.下载jdk-8u121-windows-x64.exe这个安装,这个检测不通过会影响安装 二.把万维网服务的这个去掉,这个影响数据库实例的创建 ...
- LeetCode-Best Time to Buy and Sell Stock III[dp]
Say you have an array for which the ith element is the price of a given stock on day i. Design an al ...
- java.lang.NoSuchMethodError: antlr.collections.AST.getLine()I
今天使用hql语句的时候,遇到了一个这样的bug,修改的方法是
- QT QT creator QTsdk的区别
Qt是一个跨平台的C++图形用户界面应用程序框架.它提供给应用程序开发者建立艺术级的图形用户界面所需的所用功能.Qt是完全面向对象的,很容易扩展,并且允许真正地组件编程. QT Creator 跨平台 ...
- EF 数据库迁移（Migration）
Update-Database -ConnectionStringName "MyConnectionString"
- centos6.8 静默安装 oracle 11.2.0.4
安装环境及系统要求 (下文具体参数值与路径根据自己的环境调整)操作系统:Red Hat Enterprise Linux 6 (x86) 或者CentOS 6 (x64) 数据库:Oracle ...
- Js中有关变量声明和函数声明提升的问题
在ECMAScript5中没有块级作用域一说,只有函数作用域和全局作用域,在其中声明的变量和函数和其他语言的展现形式不同,在某些情况下不一定需要先定义后使用,函数和变量的使用可以在其声明之前,这到底是 ...
- JavaSE（五）JAVA对象向上转型和向下转型
今天做了一个测试的题目,发现自己还是很多问题没有静下心来做.很多问题是可以自己解决的但是自己一是没有读清题意,二是自己心里太急躁了.所以这个要自己应以为鉴! 对象的转型问题其实并不复杂,我们记住一句话 ...