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>
读文件--Text
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笔记之第五天的更多相关文章

  1. 【Unity Shaders】学习笔记——SurfaceShader（五）让纹理动起来

    [Unity Shaders]学习笔记——SurfaceShader(五)让纹理动起来 转载请注明出处:http://www.cnblogs.com/-867259206/p/5611222.html ...

  2. VSTO学习笔记（十五）Office 2013 初体验

    原文:VSTO学习笔记(十五)Office 2013 初体验 Office 2013 近期发布了首个面向消费者的预览版本,我也于第一时间进行了更新试用.从此开始VSTO系列全面转向Office 201 ...

  3. HTML5笔记3——Web Storage和本地数据库

    上一篇:HTML5笔记2——HTML5音/视频标签详解 Web Storage概述 在HTML5中,除了Canvas元素之外,另一个新增的非常重要的功能是可以再客户端本地保存数据的Web Storag ...

  4. Nodejs学习笔记（十五）--- Node.js + Koa2 构建网站简单示例

    目录 前言 搭建项目及其它准备工作 创建数据库 创建Koa2项目 安装项目其它需要包 清除冗余文件并重新规划项目目录 配置文件 规划示例路由,并新建相关文件 实现数据访问和业务逻辑相关方法 编写mys ...

  5. [转]Nodejs学习笔记（十五）--- Node.js + Koa2 构建网站简单示例

    本文转自:https://www.cnblogs.com/zhongweiv/p/nodejs_koa2_webapp.html 目录 前言 搭建项目及其它准备工作 创建数据库 创建Koa2项目 安装 ...

  6. 深度学习课程笔记（十五）Recurrent Neural Network

    深度学习课程笔记(十五)Recurrent Neural Network 2018-08-07 18:55:12 This video tutorial can be found from: Yout ...

  7. python3.4学习笔记(二十五) Python 调用mysql redis实例代码

    python3.4学习笔记(二十五) Python 调用mysql redis实例代码 #coding: utf-8 __author__ = 'zdz8207' #python2.7 import ...

  8. Nodejs学习笔记（十五）—Node.js + Koa2 构建网站简单示例

    前言 前面一有写到一篇Node.js+Express构建网站简单示例:http://www.cnblogs.com/zhongweiv/p/nodejs_express_webapp.html 这篇还 ...

  9. Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第五章：渲染流水线

    原文:Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第五章:渲染流水线 学习目标 了解几个用以表达真实场景的标志和2D图像 ...

随机推荐

  1. 回味Python2.7——笔记1

    一.基本知识 1.一个值可以同时赋给几个变量: >>> x = y = z = 0 # Zero x, y and z >>> x 0 >>> y ...

  2. Spring源码情操陶冶-AbstractApplicationContext#registerBeanPostProcessors

    承接前文Spring源码情操陶冶-AbstractApplicationContext#invokeBeanFactoryPostProcessors 瞧瞧官方注释 /** * Instantiate ...

  3. Angular4.0学习笔记 从入门到实战打造在线竞拍网站学习笔记之二--路由

    Angular4.0基础知识见上一篇博客 路由 简介 接下来学习路由的相关知识 本来是不准备写下去的,因为当时看视频学的时候感觉自己掌握的不错 ( 这是一个灰常不好的想法 ) ,过了一段时间才发现An ...

  4. VMware workstation虚拟集群实践（1）—— 配置集群多节点互信

    一. 简述 节点互信,是集群管理的基本操作之一.节点互信是通过SSH协议的公钥密钥认证来代替密码认证来实现的.对于单点批量管理多个节点,多个节点之间相互通信来说,配置SSH单方向信任,或者互信十分必要 ...

  5. Python中的re模块--正则表达式

    Python中的re模块--正则表达式 使用match从字符串开头匹配 以匹配国内手机号为例,通常手机号为11位,以1开头.大概是这样13509094747,(这个号码是我随便写的,请不要拨打),我们 ...

  6. this final 关键字

    this: 1:将当前对象的值返回(谁调用就指谁). 2:添加this关键字可以区分局部变量和成员变量. 3:使用this可以调用其他构造函数(前提是this正处于构造函数中). final: 1:修 ...

  7. nodejs模块学习： express-session 解析

    nodejs模块学习: express-session 解析 nodejs 发展很快,从 npm 上面的包托管数量就可以看出来.不过从另一方面来看,也是反映了 nodejs 的基础不稳固,需要开发者创 ...

  8. Thinkphp5 实现悲观锁

    悲观锁介绍(百科): 悲观锁,正如其名,它指的是对数据被外界(包括本系统当前的其他事务,以及来自外部系统的事务处理)修改持保守态度,因此,在整个数据处理过程中,将数据处于锁定状态.悲观锁的实现,往往依 ...

  9. .NET并行处理和并发1-Threads and Theading

    线程是操作系统分配处理器时间的基本单元,并且进程中可以有多个线程同时执行代码. 每个线程都维护异常处理程序.调度优先级和一组系统用于在调度该线程前保存线程上下文的结构. 线程上下文包括为使线程在线程的 ...

  10. qcl注意点

    记录下,以后再做总结. 在处理量子位位置时,对于s[2]两个量子位|01>,s[0]表示的是1量子位,s[1]表示的是0量子位,顺序是从右往左走