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. SpringMVC源码情操陶冶-View视图渲染

    本节简单分析View视图对象的render方法 View接口 最重要的就是render()方法,具体源码如下 /** * Render the view given the specified mod ...

  2. [Tyvj 1730] 二逼平衡树

    先来一发题面QwQ [TYVJ1730]二逼平衡树 Time Limit:2 s   Memory Limit:512 MB Description 您需要写一种数据结构(可参考题目标题),来维护一个 ...

  3. CentOS 7 安装Subversion, 并用Nginx代理

    环境:CentOS 7.3.1611 分三步:第一步:安装subversion第二步:安装httpd第三步:安装nginx 操作步骤: 安装subversion, 命令 -> yum -y in ...

  4. 18. leetcode 387. First Unique Character in a String

    Given a string, find the first non-repeating character in it and return it's index. If it doesn't ex ...

  5. python常用模块（1）：collections模块和re模块（正则表达式详解）

    从今天开始我们就要开始学习python的模块,今天先介绍两个常用模块collections和re模块.还有非常重要的正则表达式,今天学习的正则表达式需要记忆的东西非常多,希望大家可以认真记忆.按常理来 ...

  6. RabbitMQ入门-Routing直连模式

    Hello World模式,告诉我们如何一对一发送和接收消息: Work模式,告诉我们如何多管齐下高效的消费消息: Publish/Subscribe模式,告诉我们如何广播消息 那么有没有灵活强一点的 ...

  7. LoadRunner入门（一）

    以LR自带的web系统为例(前提条件:已安装好lordrunner 11 ): 一.WebTours系统 是lordrunner自带一个飞机订票系统网站,支持IE浏览器 1. WebTours服务启动 ...

  8. c++ static用法总结【转载】

    static关键字是C, C++中都存在的关键字.static从字面理解,是“静态的“的 意思,与此相对应的,应该是“动态的“. static的作用主要有以下3个: 1.扩展生存期: 2.限制作用域: ...

  9. 利用GeoIP数据库及API进行地理定位查询 Java

    地理定位查询的的数据库比较多,而且大多都开放一些free的版本 国内的有纯真数据库等,但是他只提供文本的地理位置信息,不提供经纬度数据 当应用到google map时,就不可以了 国外的有MaxMin ...

  10. U盘安装Fedora 24时出现的几个问题及解决办法

    电脑中原有Win10 1. /dev/disk/by-label/Fedora-WS-LiveCD - does not exist 用UltraISO来制作启动盘后,会把U盘盘符改为Fedora-W ...