File对象与File对象

Blob对象

FileReader对象

File对象

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.         <title>定义input type="file" 的样式</title>
  6.         <script type="text/javascript">
  7.             function showFileName() {
  8.                 var file;
  9.                 for (var i = 0; i < document.getElementById("file").files.length; i++) {
  10.                     file = document.getElementById("file").files[i];
  11.                     console.log(file.name);
  12.                 }
  13.             }
  14.         </script>
  15.     </head>
  16.  
  17.     <body>
  18.         <input type="file" id="file" multiple> /*File对象   multiple熟悉允许多个file*/
  19.         <input type="button" onclick="showFileName()" value="上传文件"> /*显示上传的文件名*/
  20.     </body>
  21. </html>

Blob对象

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4.     <head>
  5.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.         <title>定义input type="file" 的样式</title>
  7.         <script type="text/javascript">
  8.             function showFileInfo() {
  9.                 var file;
  10.                 for (var i = 0; i < document.getElementById("file").files.length; i++) {
  11.                     file = document.getElementById("file").files[i];
  12.                     var size = document.getElementById("size");//文件大小 单位Byte
  13.                     size.innerHTML = file.size;
  14.                     var type = document.getElementById("type");//文件类型
  15.                     type.innerHTML = file.type;
  16.                     if (!/image\/\w+/.test(file.type))/*正则表达式判断是否为图片格式*/
  17.                         alert("请插入图片");
  18.                     else
  19.                         console.log("OK"); //打开浏览器审查元素 在console中显示
  20.                 }
  21.             }
  22.         </script>
  23.     </head>
  24.  
  25.     <body>
  26.         <!--File->blob:size type-->
  27.         <input type="file" id="file" multiple>
  28.         <!--/*File对象   multiple熟悉允许多个file*/-->
  29.         <input type="button" onclick="showFileInfo()" value="上传文件">
  30.         <!--/*显示上传的文件名*/-->
  31.         <br> 文件大小：
  32.         <span id="size"></span></br>
  33.         文件类型：<span id="type"></span>
  34.     </body>
  35.  
  36. </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. ASP.NET 取消和禁用缓存

    客户端取消: <html> <head> <meta http-equiv="Expires" CONTENT="0"> & ...

  2. 编解码－marshalling

    JBoss的Marshalling序列化框架,它是JBoss内部使用的序列化框架,Netty提供了Marshalling编码和解码器,方便用户在Netty中使用Marshalling. JBoss M ...

  3. Python与Hack之Unix口令

    1.在实验时候,先导入crypt库:必须在Unix环境下才能实现这个模块 2.代码贴一下,以后有了Unix环境试试吧: import cryptimport syssys.modules['Crypt ...

  4. 常用函数的DTFT变换对和z变换对

    直接从书上抓图的,为以后查表方便 1.DTFT 2.z变换对

  5. BFS(双向) HDOJ 3085 Nightmare Ⅱ

    题目传送门 题意:一个人去救女朋友,两个人都在运动,还有鬼在"扩散",问最少几秒救到女朋友 分析:开两个队列来表示两个人走过的路,一个人走到的地方另一个人已经vis了,那么就是相遇 ...

  6. NHibernate 中删除数据的几种方法

    今天下午有人在QQ群上问在NHibernate上如何根据条件删除多条数据,于是我自己就写了些测试代码,并总结了一下NHibernate中删除数据的方式,做个备忘.不过不能保证囊括所有的方式,如果还有别 ...

  7. Document 按照xml格式输出

    private void GetXMLDocument(Document doc) { OutputFormat format1 = new OutputFormat(" ", t ...

  8. BZOJ2002 & LCT模板(分块不会搞)

    题意: 看题. 某天,Lostmonkey发明了一种超级弹力装置,为了在他的绵羊朋友面前显摆,他邀请小绵羊一起玩个游戏.游戏一开始,Lostmonkey在地上沿 着一条直线摆上n个装置,每个装置设定初 ...

  9. jquery属性过滤选择器

    http://www.jb51.net/article/46279.htm   $("div[id]").addClass("highlight"); //查找 ...

  10. border单样式写法的问题

    先写 border-top:5px; border-right:10px; 后写: border-style:solid; border-color:red;