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. 2016.8.22 JavaScript入门之三

    1.对一个数组的末尾追加数据的一种简便方法是通过push()功能. 例如: var myArray = [["John", 23], ["cat", 2]];m ...

  2. 《DSP using MATLAB》示例Example4.13

    代码: b = [1, 0, -1]; a = [1, 0, -0.81]; % [R, p, C] = residuez(b,a); Mp = (abs(p))' Ap = (angle(p))'/ ...

  3. 【bzoj2440】【bzoj3994】莫比乌斯反演学习

    哇..原来莫比乌斯代码这么短..顿时感觉逼格-- 写了这道题以后,才稍稍对莫比乌斯函数理解了一些 定理:和是定义在非负整数集合上的两个函数,并且满足条件,那么我们得到结论 在上面的公式中有一个函数,它 ...

  4. linux read简单用法

    #!/bin/bash #read chars into var read -n var echo $var #read chars without showing it read -s var ec ...

  5. MFC 单文档 根据数据 绘图

    以VS2015中创建SDI为例 选择生成的类为:C***View,基类为CView,***为项目名 在***Doc.h和***Doc.cpp中创建数据模型,在***View.cpp的OnDraw()中 ...

  6. VMware 锐捷 NAT模式的服务自动关闭的解决办法

    之前一直搞不定VMware和锐捷的问题,校园网,你懂的. 后来发现,使用NAT模式联网时,锐捷会间隔性地终结windows系统的那个关于NAT联网的服务,你可以在计算机管理 - 服务,找到一个写有NA ...

  7. ps让文字的颜色变成图片的颜色

    第一种: 把某张图片图层置于文字图层之上,右击图片图层-->选择"创建剪贴蒙版"即可.第二种:把某张图片图层置于文字图层之上,并选择图片图层,按住Ctrl键,点击文字图层,载 ...

  8. Singleton模式——对象创建型模式

    Singleton模式即为单例模式/单件模式. (一)意图--保证一个类仅有一个实例,并提供一个访问它的全局访问点. 如一台计算机可以有多个端口,但是应该统一管理这些端口,避免访问冲突.--选择Sin ...

  9. 生理周期[PKU1006]

    生理周期 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 132195   Accepted: 42171 Descripti ...

  10. POJ2774 & 后缀数组模板题

    题意: 求两个字符串的LCP SOL: 模板题.连一起搞一搞就好了...主要是记录一下做(sha)题(bi)过程心(cao)得(dan)体(xin)会(qing) 后缀数组概念...还算是简单的,过程 ...