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. AndroidTips：解决Dialog全屏显示以及Dialog显示自动弹出输入法

    继承实现一个dialog,并在onCreate里面做处理. @Override  protected void onCreate(Bundle savedInstanceState) {      s ...

  2. 记一次小团队Git实践(中)

    对于初学者,从使用上先入手,往往学的最快,并从中汲取教训,再回头更深入的学习,效果尤佳. 安装git 安装git自不必说,mac已经内置了git,linux下一个命令就能搞定,windows下需要下载 ...

  3. 让一个div在不同的显示器中永远居中

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  4. 一个java集合使用bug

    在使用java集合的时候有的时候集合是来自于一些第三方工具提供的从字符串或json 转出集合的对象有时是抽象类,这时的对象部分功能是未实现的,在使用相应操作的时侯 会引发bug. Exception  ...

  5. MVC Autofac 注入点

    关键句: ** DependencyResolver.SetResolver(new AutofacDependencyResolver(container));** protected overri ...

  6. [转]Modernizr的介绍和使用

    转载自:http://blog.chinaunix.net/uid-21633169-id-4286857.html 传统浏览器目前不会被完全取代,令你难以将最新的 CSS3 或 HTML5 功能嵌入 ...

  7. URAL1018 Binary Apple Tree（树形DP）

    题目大概说一棵n结点二叉苹果树,n-1个分支,每个分支各有苹果,1是根,要删掉若干个分支,保留q个分支,问最多能保留几个苹果. 挺简单的树形DP,因为是二叉树,都不需要树上背包什么的. dp[u][k ...

  8. angularjs指令(二)

    最近学习了下angularjs指令的相关知识,也参考了前人的一些文章,在此总结下. 欢迎批评指出错误的地方.   Angularjs指令定义的API AngularJs的指令定义大致如下 angula ...

  9. BZOJ4662 : Snow

    首先离散化,即相邻关键点之间的部分可以压成一段. 注意到区间互不包含,因此排序后每个位置的清理影响到的是一段连续区间的清理工的工作长度. 这显然可以用线段树维护,支持区间减去一个数,单点加上$inf$ ...

  10. BZOJ4435 : [Cerc2015]Juice Junctions

    最大流=最小割,而因为本题点的度数不超过3,所以最小割不超过3,EK算法的复杂度为$O(n+m)$. 通过分治求出最小割树,设$f[i][j][k]$表示最小割为$i$时,$j$点在第$k$次分治过程 ...