html5 获取文件属性,H5新属性--file文件读取

首先,body里写入一个文件输入框:

然后在JS中获取到这个标签,监听它的onchang事件来读取文件(以读取文件路径为例):

var inp = document.querySelector("#myFile");

inp.onchange = function () {

//console.log(this.files);

for (var i = 0;i < this.files.length;i++) {

var file = this.files[i];

console.log(file);

var fr = new FileReader();

fr.readAsDataURL(file);

fr.onload = function () {

console.log(this.result);

var img = new Image();

img.src = this.result;

document.body.appendChild(img);

}

}

}

下面一下参数的含义以及其他的方法:

File 对象

* lastModified 最后一次修改事件(毫秒数)

* lastModifiedDate 最后一次修改日期

* name 文件名

* type 文件类型

* size 文件大小 *

* */

其他方法:

/**

* FileReader

* 1、构建FileReader实例

* 2、选择要使用的读取方式,如:readAsDataURL(),将文件对象传递给该方法

* 3、监听读取完成事件 onload,通过 this.result 得到读取结果

* 4、其他事件监听

*

* 读取方式:

* readAsDataURL(file) 读取地址

* readAsText(file[,encoding]) 读取文本

* readAsBinaryString(file) 以二进制读取

*

* 事件:

* onload 读取完成

* onloadstart 开始读取

* onloadend 结束读取 无论成功与否都会触发

* onerror 错误触发

* onabort 中断读取时触发

*

* abort() 中断读取方法

* */

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/304258.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Jquery高亮显示文本中重要的关键字

一、界面预览鼠标放到右边的Tab按钮上&#xff0c;文字透明度降低&#xff0c;同时一段文字高亮显示&#xff0c;效果如下&#xff1a;Demo地址&#xff1a;http://5thirtyone.com/sandbox/samples/fadefocus/很绚丽的效果幺&#xff01;二、实现原理将要高亮显示的文字加上<…

公众号滑动图代码_实用技巧:公众号封面图如何提取?

有好友留言说&#xff1a;经常看到很骚气的公众号封面&#xff0c;该怎么提取下载呢&#xff01;今天就告诉你&#xff0c;公众号的高清封面图如何下载&#xff01;一共有3种方法&#xff1a;01、网页代码直接下载①在浏览器打开公众号文章&#xff0c;在网页空白处鼠标右键&am…

如何使用 HttpReports 监控 .NET Core 应用程序

简介HttpReports 基于.NET Core 开发的APM监控系统&#xff0c;使用MIT开源协议&#xff0c;主要功能包括&#xff0c;统计, 分析, 可视化&#xff0c; 监控&#xff0c;追踪等&#xff0c;适合在中小项目中使用。github&#xff1a;https://github.com/dotnetcore/HttpReports…

课程笔记|吴恩达Coursera机器学习 Week1 笔记-机器学习基础

11. Introduction1.1 Supervised Learning已知输入x以及其对应的标签y&#xff0c;求解 f:x→y回归 regression&#xff1a;输出的结果y是一个连续的变量 yℝ分类 classification&#xff1a;输出的结果y是一个离散的变量 y{1,2,3...,k}1.2 Unsupervised Learning已知输入x&…

html如何链接sql sever,SQL Server链接服务器

链接服务器节点可以连接到另一个数据库&#xff0c;通常/通常在不同的机器上运行&#xff0c;也许在不同的城市/国家。如果您需要执行分布式查询(查询远程数据库)&#xff0c;这可能是有用的。设置链接服务器就是相当于使用简单的 SQL Server 管理套件&#xff0c;所有需要的就…

C#断点续传原理与实现

在了解HTTP断点续传的原理之前&#xff0c;让我们先来了解一下HTTP协议&#xff0c;HTTP协议是一种基于tcp的简单协议&#xff0c;分为请求和回复两种。请求协议是由客户机(浏览器)向服务器&#xff08;WEB SERVER&#xff09;提交请求时发送报文的协议。回复协议是由服务器(we…

.NET:使用 LinqSharp 简化复杂查询

LinqSharp 是个开源 LINQ 扩展库&#xff0c;它允许您编写简单代码来生成复杂查询&#xff0c;包括查询扩展和动态查询生成。LinqSharp.EFCore 是对 EntityFramework 的增强库&#xff0c;提供更多数据注解、数据库函数及自定义储存规则等。https://github.com/zmjack/LinqShar…

c#事件的发布-订阅模型_微信灰度测试订阅号付费功能,小米推出最便宜5G套餐,腾讯辟谣高管猝死赔钱事件,核心期刊发布十岁儿童文章,这就是今天的其他大新闻!...

今天是1月15日农历十二月廿一杭州又开始下雨了今天中午出个门我们这乡下打车排队能排到十几个。。。下面是今天的其他大新闻# 微信宣布&#xff1a;正灰度测试订阅号付费功能( IT之家 ) 1月15日消息&#xff0c;腾讯微信团队今日表示&#xff0c;目前微信灰度测试订阅号付费能力…

计算机组成原理第04章在线测试,计算机组成原理第四章单元测试(二)(含答案).docx...

PAGEPAGE 1第四章存储系统(二)测试书生1、32位处理器的最大虚拟地址空间为????A、2G????B、4G????C、8G????D、16G2、在虚存、内存之间进行地址变换时&#xff0c;功能部件 ( )将地址从虚拟(逻辑)地址空间映射到物理地址空间????A、TLB????B、MMU???…

据说这篇总结覆盖了一般Python开发面试中可能会问到的大部分问题

原文标题&#xff1a;一名python web后端开发工程师的面试总结先介绍下我的情况通信背景&#xff0c;工作一年多不到两年。之前一直在做C的MFC软件界面开发工作。公司为某不景气的国企研究所。&#xff08;喏&#xff0c;我的工作经验很水&#xff1a;1是方向不对&#xff1b;2…

理解C#泛型运作原理

前言我们都知道泛型在C#的重要性&#xff0c;泛型是OOP语言中三大特征的多态的最重要的体现&#xff0c;几乎泛型撑起了整个.NET框架&#xff0c;在讲泛型之前&#xff0c;我们可以抛出一个问题&#xff0c;我们现在需要一个可扩容的数组类&#xff0c;且满足所有类型&#xff…

visio软件接口流程图_Microsoft Office Visio绘制系统框图以及流程图的操作步骤

最近很多朋友咨询关于Microsoft OfficeVisio如何绘制系统框图以及流程图的问题&#xff0c;今天的这篇教程就来聊一聊这个话题&#xff0c;希望可以帮助到有需要的朋友。Microsoft Office Visio绘制系统框图以及流程图的操作步骤我们先在桌面空白处或文件夹下&#xff0c;点击鼠…

游戏计算机的显示器,玩游戏用多大显示器好?聊聊电脑显示器多大尺寸合适

最近有多位网友在“电脑百事网”微信公众号中留言问到“显示器多大尺寸合适”、“玩游戏用多大显示器好”类似的相关问题。今天小编就来抽空解答一下&#xff0c;希望对有类似问题的网络朋友有所参考。电脑显示器多大尺寸合适Q&#xff1a;玩游戏用多大显示器好&#xff1f;A&a…

搭建基于域名的虚拟web主机

创建两个目录&#xff0c;分别存放accp和benet两个网站的网页文件<?xml:namespace prefix o ns "urn:schemas-microsoft-com:office:office" />创建两个页面用以以后的测试因为我的主页写的是index.htm&#xff0c;在配置文件httpd.conf中没有这个引导页面&…

百度地图大数据告诉你一线城市真相

01 城市人口吸引力大PK&#xff01;2017年度城市人口吸引力指数排名▼划重点&#xff1a;1、第三列里的省会城市南昌、长春、乌鲁木齐、兰州、海口、呼和浩特、西宁是对人口的吸引力较弱。2、第二列里的贵阳、沈阳、哈尔滨、石家庄、福州、合肥、南宁、昆明对人口的吸引力尚可。…

微软开源Power Fx,基于Excel的低代码编程语言

喜欢就关注我们吧&#xff01;微软宣布推出新的开源编程语言 Power Fx&#xff0c;一种基于 Microsoft Excel 的低代码公式语言&#xff1b;将可以在整个 Microsoft Power Platform 中进行使用。该语言背后的动机是开发一些 Excel 用户熟悉的东西&#xff0c;以内容为中心而不是…

python浅拷贝_Python中的浅拷贝和深拷贝

本文翻译自copy in Python (Deep Copy and Shallow Copy)&#xff0c;讲述了在Python语言中浅拷贝与深拷贝的不同用法。全文系作者原创&#xff0c;仅供学习参考使用&#xff0c;转载授权请私信联系&#xff0c;否则将视为侵权行为。码字不易&#xff0c;感谢支持。以下为全文内…

常用计算机二级函数,计算机二级MS office常用函数

计算机二级MS office常用函数1、DAVERAGE用途&#xff1a;返回数据库或数据清单中满足指定条件的列中数值的平均值。语法&#xff1a;DAVERAGE(database&#xff0c;field&#xff0c;criteria)参数&#xff1a;Database 构成列表或数据库的单元格区域;Field指定函数所使用的数…

错误删除linux分区致Win7引导失败的修复方法

以前在Winxp和linux双启动时&#xff0c;若完全 删除了linux分区&#xff0c;重启进不了Winxp时&#xff0c;只需要用Winxp的光盘引导系统到命令行或故障恢复控制台&#xff0c;输入fixmbr和fixboot即可解决。现在是win7系统&#xff0c;命令行已经被修改。昨天我就遇到这问题&…

如何通过自学找到一份开发的工作?

01学习过程比较仔细的学习了《cprimer》&#xff0c;并对每个习题都自己写代码实现了一遍&#xff0c;包括稍微复杂一点的例子。认真读完了《effective c》&#xff0c;《effective stl》。比较仔细的学完了《数据结构与算法分析》&#xff0c;并把其中的每种数据结构和算法都用…