<!--FileReader对象的使用-->

 <!--需要及时预览
及时:当用户选择完图片之后就立即进行预览处理--onchange事件
预览:通过文件读取对象的readAsDataURL()完成
-->
<form action="">
文件:<input type="file" name="myFile" id="myFile" onchange="getFileContent();"><br/>
<input type="submit">
</form>
<img src="" alt=""> <script>
function getFileContent() {
//创建文件读取对象
var reader = new FileReader();
//读取文件,获取DataURL
var file = document.querySelector("#myFile").files;
reader.readAsDataURL(file[0]);
/*获取数据*/
reader.onload = function () {
/*展示*/
document.querySelector("img").src = reader.result;
}
}
</script>

h5-FileReader对象的使用的更多相关文章

  1. H5 FileReader对象

    前言:FileReader是一种异步文件读取机制,结合input:file可以很方便的读取本地文件. input:file 在介绍FileReader之前,先简单介绍input的file类型. < ...

  2. 前端H5中JS用FileReader对象读取blob对象二进制数据,文件传输

    HTML5中的Blob对象只是二进制数据的容器,本身并不能操作二进制,故本篇将对其操作对象FileReader进行介绍. FileReader FileReader主要用于将文件内容读入内存,通过一系 ...

  3. [HTML5] FileReader对象

    写在前面 前一篇文章介绍了HTML5中的Blob对象(详情戳这里),从中了解到Blob对象只是二进制数据的容器,本身并不能操作二进制,故本篇将对其操作对象FileReader进行介绍. FileRea ...

  4. FileReader对象

    在一些项目中,经常会遇到图片上传的情况,为了提高用户体验,一般会要求选择图片后 能预览一下图片. 以前的做法是 通过 ajax上传图片后,然后再显示出来,这样会产生大量的无用的图片文件,在HTML5的 ...

  5. 读取本地文件理解FileReader对象的方法和事件以及上传按钮的美化。

    一.FileReader对象 用来把文件读入内存,并且读取文件中的数据.FileReader对象提供了异步API,使用该API可以在浏览器主线程中异步访问文件系统,读取文件中的数据. 浏览器支持情况, ...

  6. FileReader对象的readAsDataURL方法来读取图像文件

     FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL.Data URL是一项特殊的技术,可以将资料(例如图片)内嵌在网页之中,不用放到外部文件.使用Dat ...

  7. FileReader对象异步获取外部文件的内容

    1.在网页表单中,定义input的type为file,就可以打开存储在计算机上的文件. <!DOCTYPE html> <head> <meta charset=&quo ...

  8. JavaScript 中的FileReader对象(实现上传图片预览)

    方法一:使用js的FileReader对象 1.FileReader对象简介 1.检测浏览器对FileReader的支持 if(window.FileReader) { var fr = new Fi ...

  9. javascript:FileReader对象(读取文件)

    FileReader对象 1.检测浏览器对FileReader的支持 1 if(window.FileReader) { 2 var fr = new FileReader(); 3 // add y ...

  10. 使用FileReader对象的readAsDataURL方法来读取图像文件

    使用FileReader对象的readAsDataURL方法来读取图像文件   FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL.Data URL是一项 ...

随机推荐

  1. HihoCoder第十三周:最近公共祖先 一

    #1062 : 最近公共祖先·一 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 同城那样神奇,但这个网站仍然让小Ho乐在其中,但这是为什么呢? "为什么呢?& ...

  2. python接口自动化26-发xml格式post请求《转载》

    python接口自动化26-发xml格式post请求 https://cloud.tencent.com/developer/article/1164987

  3. Swift 类的使用class

    /* 类属性的介绍 Swift中类的属性有多种 1.存储属性:存储示例的常量和变量 2.计算属性:通过某种方式计算出来的属性 3.类属性:与整个类自身相关的属性 存储属性 存储属性是最简单的属性,它作 ...

  4. Python MongoDB 插入文档

    章节 Python MySQL 入门 Python MySQL 创建数据库 Python MySQL 创建表 Python MySQL 插入表 Python MySQL Select Python M ...

  5. java List的用法

    List的用法List包括List接口以及List接口的所有实现类.因为List接口实现了Collection接口,所以List接口拥有Collection接口提供的所有常用方法,又因为List是列表 ...

  6. 用Spring中的ResponseEntity文件批量压缩下载

    我看了很多网上的demo,先生成ZIP压缩文件,然后再下载. 我这里是生成ZIP文件流 进行下载.(核心代码没多少,就是一些业务代码) @RequestMapping(value = "/& ...

  7. oracle提交commit后回退恢复

    -------------------------------------------------------begin---------------------------------------- ...

  8. 关于javascript中this 指向的4种调用模式

    this指向问题绝对可以排js 的top 5最难和最重点的问题,初学者常常搞不清楚this指向哪里,特别是学过java和c#的人,想当年俺也迷糊了好久,直到遇到蝴蝶书,主要是因为js和主流的面向对象语 ...

  9. Essay写作没灵感怎么办?

    进入6月了,童鞋们都在干啥呢?有人回国玩耍了,有人周游欧洲了,当然也有人还在悲催地上课写作业.但是呢不管你此刻在哪里,final essay或者dissertation都离你不远啦!可是可是,有些留学 ...

  10. 2020PHP面试-网络篇

    一.网络协议分层 OSI七层: 物理层.数据链路层.网络层.传输层.会话层.表示层.应用层. TCP/IP四(五)层 : 物理层(主要是光电信号的传输). 数据链路层(MAC地址.以太网协议).网络层 ...