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. 如何制作一个完美的全屏视频H5

    写在前面的话: 最近一波H5广告火爆整个互联网圈,身为圈内人,我们怎能     不! 知!道! :( 嘘!真不知道的也继续看下去,有收获 ↓ ) So,搞懂这个并不难. 这篇文章将带你从头到尾了解H5 ...

  2. org.apache.hadoop.security.AccessControlException: Permission denied: user=?, access=WRITE, inode="/":hadoop:supergroup:drwxr-xr-x 异常解决

    进行如下更改:vim /usr/local/hadoop/etc/hadoop/hdfs-site.xml[我的hadoop目录在/usr/local下,具体的是修改你的hadoop目录中的/etc/ ...

  3. KMP算法 --- 在文本中寻找目标字符串

    KMP算法 --- 在文本中寻找目标字符串 很多时候,为了在大文本中寻找到自己需要的内容,往往需要搜索关键字.这其中就牵涉到字符串匹配的算法,通过接受文本和关键词参数来返回关键词在文本出现的位置.一般 ...

  4. selenium3.x 踏坑记

    Selenium 3.x 出来也有段时间了,有哪些坑呢? 有好长一段时间没有用selenium了.最近想用来做个web自动化的小工具.根据以往经验,firefox是不需要下载driver的.启动fir ...

  5. Final 关键字

    1.涵义 最一般的意思就是声明 "这个东西不能改变".之所以要禁止改变,可能是考虑到两方面的因素:设计或效率. final 关键字可以用来修饰变量.方法和类,修饰变量表示变量不能被 ...

  6. MFS分布式文件系统管理

    MFS官方网站http://www.moosefs.org/reference-guide.html mooseFS(moose驼鹿)是一款网络分布式文件系统,它把数据分散到多台服务器上,但对于用户来 ...

  7. [SCOI2007]压缩 区间dp

    明显是个区间dp,但是我区间dp就是个渣... f[i][j]表示区间i到j最短的字符长度:假设前面加了个M,所以初始化f[i][i]=2;当然最开始是不算M的,所以f[1][1]=1;然后就可以区间 ...

  8. 从零入手微信小程序开发

    前言: 哈哈,发现我写的随笔都是项目驱使的.当然,这篇也是项目驱使的咯,前段时间领导在玩微信时候发现了微信小程序的好处,流程,切换速度快等,然后就让小弟研究研究小程序的实现. 补充下,博客大多都是处理 ...

  9. Hadoop之HelloWorld

    Hadoop开始: 1. 下载最新的发行版,解压到你喜欢的路径. 2. 配置,Hadoop的配置文件位于-/hadoop/conf/ 目录下.这里我先只配置了core-site.xml文件. < ...

  10. Selenium2 (python)

    包名:selenium 支持浏览器:Firefox,InternetExplorerDriver,OperaDriver,Chrome(要使用一种浏览器应下载相应的driver驱动) 一.基本命令 d ...