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. X-UA-Compatible属性的解释

    问题描述: 代码如下: <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE& ...

  2. 那些Android中的性能优化

    性能优化是一个大的范畴,如果有人问你在Android中如何做性能优化的,也许都不知道从哪开始说起. 首先要明白的是,为什么我们的App需要优化,最显而易见的时刻:用户say,什么狗屎,刷这么久都没反应 ...

  3. 运用datalist标签实现用户的搜索列表

    datalist是一个很强大的HTML5标签,支持一般类似于模糊查询,以前都是需要js来做的.下面是一个datalist配合js的小例子,主要是实现用户是否存在,以及添加过程中是否重复的判断. 首先是 ...

  4. mvn exec用法，运行jar后台驻留进程

    java工程如果打包成war,那依赖的jar包都会被包含进去. 不过如果开发java的后台驻留进程,那一般会打包成jar包的形式,要想在运行进程的时候找到所有的依赖包,基本有如下两种方式: 方式一: ...

  5. Windows RC版、RTM版、OEM版、RTL版、VOL版的区别

    Windows 版本号标识区别一览表: 版本缩写 版本全称 版本意义 Alpha版 Alpha 内部测试版,一般不会向外部发布,会有很多Bug,只供测试人员使用,如果您看到Alpha版本了,一般来讲对 ...

  6. bzoj1006 [HNOI2008]神奇的国度

    1006: [HNOI2008]神奇的国度 Time Limit: 20 Sec  Memory Limit: 162 MBSubmit: 2304  Solved: 1043 Description ...

  7. BZOJ4707 : B君的技巧

    建立线段树,设$f[x][l][r]$表示当前考虑$x$点,最左端是$l$,最右端是$r$的最少代价. 如果$a$在$x<<1$,$d$在$x<<1|1$, 设$g[a][c] ...

  8. Extjs 属性控件[转载]

    Ext.form.TimeField: 配置项:            maxValue:列表中允许的最大时间            maxText:当时间大于最大值时的错误提示信息          ...

  9. [深入浅出WP8.1(Runtime)]网络编程之HttpClient类

    12.2 网络编程之HttpClient类 除了可以使用HttpWebRequest类来实现HTTP网络请求之外,我们还可以使用HttpClient类来实现.对于基本的请求操作,HttpClient类 ...

  10. 【BZOJ】3757: 苹果树

    http://www.lydsy.com/JudgeOnline/problem.php?id=3757 题意:n个节点的树,每个点有一种颜色.现有m种询问,每次询问x y a b表示x到y的路径上颜 ...