File对象与File对象

Blob对象

FileReader对象

File对象

<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>定义input type="file" 的样式</title>

        <script type="text/javascript">

            function showFileName() {

                var file;

                for (var i = 0; i < document.getElementById("file").files.length; i++) {

                    file = document.getElementById("file").files[i];

                    console.log(file.name);

                }

            }

        </script>

    </head>

    <body>

        <input type="file" id="file" multiple> /*File对象   multiple熟悉允许多个file*/

        <input type="button" onclick="showFileName()" value="上传文件"> /*显示上传的文件名*/

    </body>

</html>

Blob对象

<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>定义input type="file" 的样式</title>

        <script type="text/javascript">

            function showFileInfo() {

                var file;

                for (var i = 0; i < document.getElementById("file").files.length; i++) {

                    file = document.getElementById("file").files[i];

                    var size = document.getElementById("size");//文件大小 单位Byte

                    size.innerHTML = file.size;

                    var type = document.getElementById("type");//文件类型

                    type.innerHTML = file.type;

                    if (!/image\/\w+/.test(file.type))/*正则表达式判断是否为图片格式*/

                        alert("请插入图片");

                    else

                        console.log("OK"); //打开浏览器审查元素 在console中显示

                }

            }

        </script>

    </head>

    <body>

        <!--File->blob:size type-->

        <input type="file" id="file" multiple>

        <!--/*File对象   multiple熟悉允许多个file*/-->

        <input type="button" onclick="showFileInfo()" value="上传文件">

        <!--/*显示上传的文件名*/-->

        <br> 文件大小：

        <span id="size"></span></br>

        文件类型：<span id="type"></span>

    </body>

</html>

FileReader对象

HTML5文件API的更多相关文章

  1. 用html5文件api实现移动端图片上传&预览效果

    想要用h5在移动端实现图片上传&预览效果,首先要了解html5的文件api相关知识(所有api只列举本功能所需): 1.Blob对象  Blob表示原始二进制数据,Html5的file对象就继 ...

  2. HTML5 文件API（一）

    1.FileList对象与File对象 2.文件API之Bolb对象 A Blob object represents a file-like object of immutable, raw dat ...

  3. HTML5文件API之FileReader

    在文件上传之前,我们总想预览一下文件内容,或图片样子,html5 中FileReader正好提供了2种方法,可以在不上传文件的情况下,预览文件内容. 图片预览:readAsDataURL(file); ...

  4. HTML5 文件API（二）

    1.FileSystem概述及浏览器检 2.申请磁盘配额 3.创建文件

  5. HTML5 文件API

    filelist 表示文件对象的列表. <form name="upload"> <input type="file" name=" ...

  6. Resumable.js – 基于 HTML5 File API 的文件上传

    Resumable.js 是一个 JavaScript 库,通过 HTML5 文件 API 提供,稳定和可恢复的批量上传功能.在上传大文件的时候通过每个文件分割成小块,每块在上传失败的时候,上传会不断 ...

  7. HTML5权威指南--标签新变化,文件API,拖放API(简要学习笔记一)

    1.标签元素更加语义化   2.内容类型仍然为“text/html”    扩展符仍然为html或者htm.    <1>DOCTYPE 声明<!DOCTYPE html>就可 ...

  8. HTML5 File API — 让前端操作文件变的可能

    前言 在 HTML5 File API 出现之前,前端对于文件的操作是非常有局限性的,大多需要配合后端实现.出于安全角度考虑,从本地上传文件时,代码不可能获取文件在用户本地的地址,所以纯前端不可能完成 ...

  9. HTML5 file api读取文件的MD5码工具

    1.工具的用途:用HTML5 file api读取文件的MD5码.MD5码在文件的唯一性识别上有很重要的应用,业内常用MD5进行文件识别.文件秒传.文件安全性检查等: 2.适用性:IE.Chrome皆 ...

随机推荐

  1. 从零开始---控制台用c写俄罗斯方块游戏（1）

    从零开始---控制台用c写俄罗斯方块游戏(1) 很少写博文,一来自身知识有限,二来自己知道,已经有很多这样的博文了,三就是因为懒,文笔也一般,四来刚出来工作,时间也不多 之所以写这篇博文,是因为应群里 ...

  2. 在C#代码中应用Log4Net（二）典型的使用方式(转)

    不管用什么框架,学什么东西,最初的想法还不是尽快地用上这个框架,所以我们在这个章节还是不打算介绍具体配置节的应用,而是直接给出一个经典的使用样例,让你尽快上手.即使你对Log4Net的配置不熟悉也完全 ...

  3. RabbitMQ常用命令

    创建一个用户为mytest,密码为mytest rabbitmqctl add_user mytest mytest 删除一个用户  rabbitmqctl delete_user username ...

  4. 仓库、超市、服装、食品、批发零售手持打印PDA开单器-现场无线开单扫描 无线传输电脑

    深圳浩瀚技是一家主要从事手持数据终端硬件.软件研究.销售服务为一体的高新企业公司.公司主要销售进销存等无线开单系统.工业级手持PDA,安卓数据采集器,RFID阅读器等设备.我们秉承“诚信.敏捷.繁荣” ...

  5. fzu月赛 2203 单纵大法好 二分

    Accept: 8    Submit: 18Time Limit: 5000 mSec    Memory Limit : 65536 KB  Problem Description 人在做,天在看 ...

  6. 表格边框css

    table标签默认是没有边框的,但是如果我们自己加上边框boder:1px solid black;只有整个表格最外面有边框,那么如何给表格添加样式使得整个表格的tr.td都具有边框呢: <st ...

  7. DP ZOJ 2745 01-K Code

    题目传送门 题意:要求任意连续子序列中0和1的数量差不超过k的方案数 分析:想好状态其实不难.dp[i][j][k]表示考虑前i长度,后缀中最大的 sum(0) - sum(1) = j, sum ( ...

  8. BZOJ4421 : [Cerc2015] Digit Division

    如果两个相邻的串可行,那么它们合并后一定可行,所以求出所有可行的串的个数$t$,则$ans=2^{t-1}$. 注意特判整个串不可行的情况,这个时候答案为0. #include<cstdio&g ...

  9. HDU 2851 (最短路)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2851 题目大意:给出N条路径,M个终点(是路径的编号) .重合的路径才算连通的,且路径是单向的.每条路 ...

  10. BZOJ1012[JSOI2008]最大数maxnumber 题解

    题目大意: 维护一个数列,有两种操作:1. 查询当前数列中末尾L个数中的最大的数,并输出这个数的值.限制:L不超过当前数列的长度.2.插入操作:将n加上t,其中t是最近一次查询操作的答案(如果还未执行 ...