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     数据读取完成时触发，无论成功失败