小记 HTML5 file对象

<input type="file" id="myfile" multiple>

这是个很普通的 file 上传组件,multiple 是支持多选,当然 IE6-9 是不支持的,所以先不论他们了。

file对象 是一个非常好用的东西,可以获取到文件的 文件名,文件大小,文件类型,最后一次修改日期。
用起来也很简单,来看个小例子:

<!doctype html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>file</title>
</head>
<body>
  <input type="file" id="myfile" multiple>
  <script>
    var myfile = document.getElementById("myfile");
    myfile.onchange = function () {
      console.log(myfile.files);
    }
  </script>
</body>
</html>

不出意外的话,你可以在控制台看到如下内容:

好了,今天就分享这个小知识点。

小记 HTML5 file对象,布布扣,bubuko.com

时间: 2024-08-26 14:23:52

小记 HTML5 file对象的相关文章

HTML5 file API加canvas实现图片前端JS压缩并上传 (转载)

一.图片上传前端压缩的现实意义 对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 这种体验包括两方面: 由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅,同时大大降低了网络异常导致上传失败风险. 最最重要的体验改进点:省略了图片的再加工成本.很多网站的图片上传功能都会对图片的大小进行限制,尤其是头像上传,限制5M或者2M以内是非常常见的.然后现在的数码设备拍摄功能都非常出众,一张原始图片超过2M几乎是标配,此时如果用户想把手机或相机中的某个得意图片

HTML5 File接口(在web页面上使用文件)

File接口提供了与文件相关的信息,并且运行JavaScript在web页面上去访问文件中的内容. File对象来自于用户使用input标签选择文件返回的FileList对象,来自于拖放操作的DataTransfer对象.File对象是一种特殊的Blob,它能够在任何能够使用Blob的上下文中使用. 要在web页面中使用文件,通常需要涉及到的对象有:File对象,FileList对象,FileReader对象. FileList对象 FileList来自于两个地方,分别是input元素的file

javascript 使用Html5 File Api进行文件读取

javascript 使用Html File Api进行文件读取,注意"读取"是只读不写,不可以主动获取浏览器所在主机的文件列表. Html5 中 FileApi主要有 FileUpload, File,FileList,FileError,Blob,FileReader,DataTransfer. 这里主要测试File.因此有必要给一个 test target <form action="javascript:void(0)" method="po

HTML5 File API — 让前端操作文件变的可能

前言 在 HTML5 File API 出现之前,前端对于文件的操作是非常有局限性的,大多需要配合后端实现.出于安全角度考虑,从本地上传文件时,代码不可能获取文件在用户本地的地址,所以纯前端不可能完成一些类似图片预览的功能.但是 File API 的出现,让这一切变成了可能. 跟着楼主由浅入深,了解下强大的 File API 吧. FileList FileList 对象针对表单的 file 控件.当用户通过 file 控件选取文件后,这个控件的 files 属性值就是 FileList 对象.

swfupload js中 file 对象的属性

name=3cc68cfc60b87e6dd6887d8a.jpg modificationdate=Wed   Apr 21 15:48:30 UTC+0800 2010 filestatus=-1 post=[object   Object] type=.jpg index=0 size=29006 creationdate=Wed Apr 21 15:48:38 UTC+0800   2010 id=SWFUpload_0_0swfupload js中 file 对象的属性,布布扣,bub

相对路径与绝对路径构造file对象

package file; import java.io.File; public class FileTest1 { public static void main(String[] args) { // TODO Auto-generated method stub /*只是建立跟这个文件的联系,不会去查看这个文件是否存在*/ String parentPath="E:/backup"; String name="EXPDAT.DMP"; //使用相对路径去构建

JAVA学习第五十二课 — IO流(六)File对象

File类 用来给文件或者文件夹封装成对象 方便对文件与文件夹的属性信息进行操作 File对象可以作为参数传递给流的构造函数 一.构造函数和分隔符 public static void FileDemo() {//构造函数演示 //可以将一个已存在或不存在的文件或目录封装成File对象 File file = new File("d:\\a.txt"); File file2 = new File("d:","a.txt"); File file

HTML5自定义属性对象Dataset

原文转自HTML5自定义属性对象Dataset简介 一.html5 自定义属性介绍 之前翻译的“你必须知道的28个HTML5特征.窍门和技术”一文中对于HTML5中自定义合法属性data-已经做过些介绍,就是在HTML5中我们可以使用data-前缀设置我们需要的自定义属性,来进行一些数据的存放,例如我们要在一个文字按钮上存放相对应的id: <a href="javascript:" data-id="2312">测试</a> 这里的data-

JAVA之IO技术-获取指定目录下的文件夹和文件的File对象或是字符串名称。

package ioTest.io3; /* * 获取指定目录下的文件夹和文件的File对象或是字符串名称. * 也可以通过filter获取指定的文件夹或者指定类型的文件 * 这里面需要做一个总结,如何利用jdk的源码去理解不熟悉的方法的应用. */ import java.io.File; import java.io.FileFilter; import java.io.FilenameFilter; public class FileDemo2 { public static void m