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. windows下自动关机

    定时:at 00:00 shutdown -s     //在00:00时关机 倒计时:shutdown -s -t 3600   //3600s后关机 取消:shutdown -a

  2. Css3 提示框

    <div class="arrow_box"><span>xxy is a so cool boy</span></div> css ...

  3. android studio遇到的问题(记录总结)

    SDK 无法更新解决方案 这个问题不是Android Studio的问题,而且由一些一些众所周知的原因导致的,我们这里说下解决办法. 打开SDK Manager,停止更新连接:在界面上方找Tools- ...

  4. Android学习系列(42)--Android Studio实战技巧

    使用android studio开发项目的一些问题,功能和技巧. 1. 环境 Mac OSX 10.9.5 + Android Studio 0.8.9 2. gradle项目加载超慢 这是因为gra ...

  5. AngularJS学习之全局API（应用程序编程接口）

    1.AngularJS全局API用于执行常见任务的Javascript函数集合: **比较对象 **迭代对象 **转换对象 2.全局API函数使用angularJS对象进行访问:以下是通用API函数: ...

  6. mvc-10部署

    性能 提高性能最简单的办法就是减少HTTP的请求数量,每个HTTP请求除了有TCP开销外,还包含大量的头信息: 让页面和其资源文件保持较小的体积将减少网络用时,对于互联网上的应用而言,这才是真正的瓶颈 ...

  7. 浩瀚移动POS收银开单扫描解决方案PDA仓储系统,无线批发,移动批发,无线POS,无线销售APP-车销管理PDA

    适用范围 各种业态的批发商铺.批发市场.订货会.展销会.配送中心仓库…… 产品简介 随着移动技术与智能PDA设备的迅猛发展,中国已经跨步进入移动信息化社会.移动商务是移动信息社会的重要载体与形式,它开 ...

  8. 《用delphi开发共享软件》-15.2桌面提示器

    打开一个配置文件: 打开一个配置文件 操作TStringGrid Procedure EmptyGrid(Var sg:TStringGrid); Var i:Integer; begin do sg ...

  9. CocoaPods安装和使用教程

    Code4App 原创文章.转载请注明出处:http://code4app.com/article/cocoapods-install-usage 目录 CocoaPods是什么? 如何下载和安装Co ...

  10. Hadoop执行作业时报错：java.lang.OutOfMemoryError: Java heap space

    常常被一些用户问到,说“为什么我的mapreduce作业总是运行到某个阶段就报出如下错误,然后失败呢?以前同一个作业没出现过的呀?” 10/01/10 12:48:01 INFO mapred.Job ...