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. IDEA 单元测试testng入门及testng.xml

    直接进入正题: 1.TestNG的运行方式如下: With a testng.xml file 直接run as test suite With ant 使用ant From the command ...

  2. （转）log4j（四）——如何控制不同风格的日志信息的输出？

    一:测试环境与log4j(一)——为什么要使用log4j?一样,这里不再重述 1 老规矩,先来个栗子,然后再聊聊感受 import org.apache.log4j.*; //by godtrue p ...

  3. (转)目前比较全的CSS重设(reset)方法总结

    在当今网页设计/开发实践中,使用CSS来为语义化的(X)HTML标记添加样式风格是重要的关键.在设计师们的梦想中都存在着这样的一个完美世界:所有的浏览器都能够理解和适用多有CSS规则,并且呈现相同的视 ...

  4. 简单设置android启动画面

    1.新建Activity,以及layout文件夹里的xml文件2.将新建Activity在AndroidManifest中设为默认Activity,并且添加:android:theme="@ ...

  5. 关于JavaScript组件化的探索

    Loaders 先放出项目地址:https://github.com/j20041426/Loaders 这是一个可以动态选择加载动画的样式和颜色的插件.这个项目仅仅是作为对js组件化的一个探索,不太 ...

  6. JSP和El表达式和JSTL标签库使用

    核心标签库: <%@ page language="java" import="java.util.*" pageEncoding="utf-8 ...

  7. poj-2287---Tian Ji -- The Horse Racing

    #include<iostream> #include<algorithm> using namespace std; bool cmp(const int,const int ...

  8. UITableView移除某行的分割线和让分割线宽度为cell的宽度

    1.移除 UITableView 某一行的分割线 所谓移除,其实就是使其偏移出 cell 的显示范围,看不到即移除. 方法1: 移除系统的分割线,自己定义每行的分割线 self.tableView.s ...

  9. 【HOSTS相关】什么时候使用127.0.0.1

    什么时候使用127.0.0.1 在测试环境,如果想知道上线后服务发生异常中断的情况下界面会如何展示,这个时候有2种方式: 第1种是:由开发人员协助,比如后台开发人员在服务器上使这个服务停止,或者由前端 ...

  10. Linux - 简明Shell编程02 - 变量（Variable）

    脚本地址 https://github.com/anliven/L-Shell/tree/master/Shell-Basics 示例脚本及注释 #!/bin/bash v1=test-variabl ...