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. OVS故障处理一例

    OVS下无法访问内部网站 遇到朋友求助的一个客户问题,环境是这样的,客户在自己的iaas平台(不是openstack)上使用ovs,物理交换机上配置vlan和dhcp service,计算节点的ovs ...

  2. iptables中DNAT的配置方法

    1.一对一流量完全DNAT 首先说一下网络环境,普通主机一台做防火墙用,网卡两块 eth0 192.168.0.1  内网 eth1 202.202.202.1 外网 内网中一台主机 192.168. ...

  3. Linux服务器中安装Oracle

    笔者手动安装成功 一,oracle安装前的准备与配置 1,修改stsctl.conf文件 Linux是为小文件设计的,Oracle数据库安装需要占用较多资源,要把各项参数调大. 使用vi编辑/etc/ ...

  4. python 排序sorted

    num = [3,2,4,6,5] anum = sorted(num) dnum = sorted(num,reverse=True) print '升序:',anum # 升序: [2, 3, 4 ...

  5. 在Navicat 中给Mysql中的某字段添加前缀00

    第一次分享心得,希望大家多多关注. 我遇到的情况是这样的,在Navicat中某表的varchar字段内容长度不够5的在内容前面添加‘0’:如字段内容是 101 我就要改成00101: 其中有2个难点: ...

  6. .net 设置webbrowser控件使用的IE版本

    当我们在使用.net的Webbrowser控件时,发现webbrowser展示的内容和我们用浏览器展示的内容不一致,甚至出现:'JSON' is undefined. 原因是webbrowser使用的 ...

  7. sqlmap tamper的使用

    前言 在早之前我对于tamper的使用一直都是停留在错误的思维.想着bypass,应该要先手动fuzz出规则来,然后再写成tamper使用. 直到今天,才察觉根本不需要一定要fuzz出具体的规则来,无 ...

  8. 1 Acid burn ★ Nag,Name/Serial,Serial

    无花无壳爆破 仅允许非商业转载,转载请注明出处

  9. 【原创】IE8升级到IE11控制台报错的解决方案

    公司win7 64位 英文版系统,刚从IE8升级到IE11,在我F12准备调试js的时候,竟然发现控制台报错了!天啦撸,顿时慌了有木有! 网上搜索了半天,解决方案如下: http://www.micr ...

  10. Office远程代码执行漏洞CVE-2017-0199复现

    在刚刚结束的BlackHat2017黑帽大会上,最佳客户端安全漏洞奖颁给了CVE-2017-0199漏洞,这个漏洞是Office系列办公软件中的一个逻辑漏洞,和常规的内存破坏型漏洞不同,这类漏洞无需复 ...