HTML5 FileReader
利用HTML5中的FileReader类,动态切换af中Panel的背景,动态设置img元素的图片
1 if(FileReader){
2 $('.panel').on("tap",function(e){
3 console.log("target",e.target)
4 $('#filebk').click();
5 });
6 var f=$('#filebk').on("change",function(){
7 var fr=new FileReader();
8 fr.onload=function(){
9 console.log(this.result.length,this.result)
10 $(".panel").css("background-image",'url('+this.result+')');
11 $('.panel').css({"background-size":"100% 100%","background-position":"left top"})
12 }
13 fr.readAsDataURL(f.get(0).files[0])
14 });
15 var slingImg=null;
16 $('img').on("tap",function(e){e.preventDefault();e.stopPropagation();
17
18 slingImg=$(this),$('#fileimg').click();return true;});
19 $('#fileimg').on('change',function(){
20 if(!slingImg)return;
21 var fr=new FileReader();
22 fr.onload=function(){
23 console.log(this.result.length,this.result)
24 slingImg .attr("src",this.result);
25 slingImg=null;
26 }
27 fr.readAsDataURL($(this).get(0).files[0])
28 });
29 }
FileReader的方法和事件
方法/事件 参数 描述 abort 中断读取
readAsText(file, [encoding]) 将文件读取为文本
该方法有两个参数,其中第二个参数是文本的编码方式,默认值为 UTF-。这 个方法非常容易理解,将文件以文本方式读取,读取的结果即是这个文本文件 中的内容。
readAsBinaryString(file) 将文件读取二进制码
通常我们将它传送到后端,后端可以通过这段字符串存储文件
readAsDataURL(file) 将文件读取为DataURL
将文件读取为一串Data URL字符串,将小文件以一种特殊格式的URL地址直接读 入页 面。小文件指图像与html等格式的文件。
事件
onabort 数据读取中断时触发
onerror 数据读取出错时触发
onloadstart 数据读取开始时触发
onload 数据读取成功完成时触发
onloadend 数据读取完成时触发,无论成功失败
HTML5 FileReader的更多相关文章
- 使用html5 FileReader获取图片,并异步上传到服务器(不使用iframe)
使用html5 FileReader获取图片,并异步上传到服务器(不使用iframe) 原理: 1.使用FileReader 读取图片的base64编码 2.使用ajax,把图片的base64编码 ...
- 通过HTML5 FileReader实现上传图片预览功能
原文:http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201706224590.html 在上传图片到服务器之前,我们希望可以预览一下要上传的图片. ...
- Data Url生成工具之HTML5 FileReader实现
百度经验版本号:怎样用HTML5的FileReader生成Data Url 上一篇讲了:用Visual Studio 2010编写Data Url生成工具C#版 今天用HTML5 FileReader ...
- 使用html5 FileReader获取图片,并异步上传到server(不使用iframe)
使用html5 FileReader获取图片,并异步上传到server(不使用iframe) 原理: 1.使用FileReader 读取图片的base64编码 2.使用ajax.把图片的base64编 ...
- 使用 html5 FileReader 获取图片, 并异步上传到服务器 (不使用 iframe)
为什么80%的码农都做不了架构师?>>> 原理: 1.使用FileReader 读取图片的base64编码 2.使用ajax,把图片的base64编码post到服务器. 3.根据 ...
- [HTML5] FileReader对象
写在前面 前一篇文章介绍了HTML5中的Blob对象(详情戳这里),从中了解到Blob对象只是二进制数据的容器,本身并不能操作二进制,故本篇将对其操作对象FileReader进行介绍. FileRea ...
- HTML5 FileReader实现图片上传前预览
如果你的浏览器支持Html5的FileReader的话,实现图片上传前进行预览是一件非常容易之事情. 在控制器,创建一个视图Action: jQuery代码: 实时演示一下: 下面内容于2014-11 ...
- html5 filereader 读取图片信息
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- html5 filereader读取流注意事项
对于截取读入的文件,一定要new FileReader,不可写全局调用同一个reader. 错误代码!!!function readAsBinaryString(file,callback){ rea ...
随机推荐
- mybatis中的.xml文件总结——mybatis的动态sql
resultMap resultType可以指定pojo将查询结果映射为pojo,但需要pojo的属性名和sql查询的列名一致方可映射成功. 如果sql查询字段名和pojo的属性名不一致,可以通过re ...
- Android RecyclerView网格布局
一个简单的网格布局activity_main.xml <?xml version="1.0" encoding="utf-8"?> <andr ...
- The type name 'IComponentConnector' could not be found in the namespace 'System.Windows.Markup'
场景:Visual Studio写WPF项目时,想要生成XML文件,默认的WPF项目没有引入System.XML这个dll.在[解决方案资源管理器——引用]右键添加了System.XML引用后,运行项 ...
- Javascript类型转换的规则
Javascript的变量是松散类型的,它可以存储Javascript支持的任何数据类型,其变量的类型可以在运行时被动态改变.请看示例: 1 2 3 var n = 10; n = "hel ...
- java中unicode和中文相互转换
package test.com.gjob.services; import java.util.Properties; public class Test { public static void ...
- MVC教程八:母版页(布局页)视图
一.母版页介绍和使用 母版页的扩展名为".cshtml",也叫做视图布局页,它相当于网页的模板.在其他网页中,只要引用了母版页,母版页的页面内容就可以自动显示出来,设计者可以修改引 ...
- java对mongoDB的基本操作 ,游标使用
package com.mongodb.text; import java.net.UnknownHostException; import java.util.List; import org.bs ...
- oracle分页查询原理浅析
原因一 oracle默认为每个表生成rowmun,rowid字段,这些字段我们称之为伪列 1 创建测试表 CREATE TABLE TEST( ID NUMBER, NAME VARCHAR2(20) ...
- jQuery .load() 里面的代码不能执行
今天在写代码的时候发现.on('load')绑定的事件没用.代码如下: debugger断点没进来,说明函数压根没进来. 后面在stackoverflow上找到了解决方法,方法如下图: 这样写,如果提 ...
- java BlockingQueue 用法
在新增的Concurrent包中,BlockingQueue很好的解决了多线程中,如何高效安全“传输”数据的问题.通过这些高效并且线程安全的队列类,为我们快速搭建高质量的多线程程序带来极大的便利.本文 ...