ionic上传身份证正反面照片、上传图片、FileReader使用

项目笔记：

有借鉴有自己的理解。

思路：上传图片首先需要获取到显示图片的div的DOM节点，然后监听input的值，当input的值发生变化的时候，就将input的这个值插进div里面显示。

1.获取背景图的Dom节点

2.获取input的DOM节点

3.判断浏览器是否支持FileReader。不支持就是返回提示，支持就监听input的DOM节点。当发生改变change的时候调用读取图片值的函数，将改变后的图片值set到背景的DOM节点里面去。实现当图片上传后替换原来的图片。

4.写读取图片值的函数来读取File并把file变成url形式。

具体看代码：

html:

    
上传身份证

class="photo">
"javascript">
"../../assets/icon/contrary.png" id="bgpic">
"file" id="IdCard">



class="photo photo1">
"javascript">
"../../assets/icon/contrary.png" id="bgpicb">
"file" id="IdCardbg">
    
    
    

ts.(js):

ionViewDidEnter() {

var res = document.getElementById("bgpic"); //获取背景图片的DOM

var ins = document.getElementById("IdCard"); //获取input的DOM

var resbg= document. getElementById( "bgpicb");

var insbg= document. getElementById( "IdCardbg");

if(typeofFileReader==="undefined"){ //判断浏览器是否支持FileReader

res. innerHTML= "很抱歉你的浏览器不支持FileReader";

ins. setAttribute( "disabled", "disabled");

resbg. innerHTML= "很抱歉你的浏览器不支持FileReader"

insbg. setAttribute( "disabled", "disabled")

}

else{

ins.addEventListener('change',readerfile,false); //监听input的值是否发生变化

insbg. addEventListener( 'change', readerfilebg, false);

}

functionreaderfile(){ //读取文件的file

var file = this. files[ 0];

console. log( file. size/ 1024);

if (!/image\/\w+/.test(file.type)) { //限制文件类型

alert( "文件必须为图片！");

return false;

}

var reader = new FileReader(); //用FileReader读取文件值

reader. readAsDataURL( file);

reader.onload =function (e) { //加载FileReader的时候

console. log( res);

res. setAttribute( 'src', this. result); // this . result就是当前图片的src值。也是要提交给后台的数据

}

}

function readerfilebg(){

var file = this. files[ 0];

console. log( file. size/ 1024);

if (! /image\/\w+ /. test( file. type)) {

alert( "文件必须为图片！");

return false;

}

var readerbg = new FileReader();

readerbg. readAsDataURL( file);

readerbg. onload = function ( e) {

console. log( resbg);

var aa= this. result;

console. log( aa);

resbg . setAttribute ( 'src' , this . result ); //this.result就是当前图片的src值。也是要提交给后台的数据

}

}

}

效果：

一般是在CSS里面设置使图片的z-index在最下面，，使input的z-index在最上面。并且把input设置为透明做出一种点击图片更换图片的效果。（随便做了一个比较糙的效果。）

点击图片上传效果：

SCSS：

.photo{

width: 80%;

min-height: 40px;

border-radius: 4px;

// border: 1px solid red;

a{

position: relative;

display: block;

width: 100%;

height: 100%;

border-radius: 10px;

// border: 1px solid black;

}

input[ type= "file "]{

position: absolute;

display: block;

width: 100%;

height: 100px;

border-radius: 10px;

border: 1px solid blue;

opacity: 0;

z-index: 2;

}

img{

display: block;

width: 100%;

height: 100px;

position: absolute;

z-index: 1;

border: none;

}

}

.photo1{

margin-top: 100px;

}

用到的方法：

element.setAttribute(attributename,attributevalue)

resbg.setAttribute('src',this.result);

HTML5定义了FileReader作为文件API的重要成员用于读取文件，根据W3C的定义，FileReader接口提供了读取文件的方法和包含读取结果的事件模型。

FileReader的使用方式非常简单，可以按照如下步骤创建FileReader对象并调用其方法：

1.检测浏览器对FileReader的支持

[javascript]  view plain  copy

 if(window.FileReader) {
     var fr = new FileReader();
     // add your code here
 }
 else {
     alert("Not supported by your browser!");
 }

或者： if(typeofFileReader==="undefined"){ //判断浏览器是否支持FileReader

2. 调用FileReader对象的方法

FileReader 的实例拥有 4 个方法，其中 3 个用以读取文件，另一个用来中断读取。下面的表格列出了这些方法以及他们的参数和功能，需要注意的是 ，无论读取成功或失败，方法并不会返回读取结果，这一结果存储在 result属性中。

方法名	参数	描述
abort	none	中断读取
readAsBinaryString	file	将文件读取为二进制码
readAsDataURL	file	将文件读取为 DataURL
readAsText	file, [encoding]	将文件读取为文本

3. 处理事件

FileReader 包含了一套完整的事件模型，用于捕获读取文件时的状态，下面这个表格归纳了这些事件。

事件	描述
onabort	中断时触发
onerror	出错时触发
onload	文件读取成功完成时触发
onloadend	读取完成触发，无论成功或失败
onloadstart	读取开始时触发
onprogress	读取中

文件一旦开始读取，无论成功或失败，实例的 result 属性都会被填充。如果读取失败，则 result 的值为 null ，否则即是读取的结果，绝大多数的程序都会在成功读取文件的时候，抓取这个值。

 fr.onload = function() {
     this.result;
 };

eg:

 <script type="text/javascript">
         function showPreview(source) {
             var file = source.files[0];
             if(window.FileReader) {
                 var fr = new FileReader();
                 fr.onloadend = function(e) {
                     document.getElementById("portrait").src = e.target.result;
                 };
                 fr.readAsDataURL(file);
             }
         }
     script>

 <input type="file" name="file" onchange="showPreview(this)" />
                                 <img id="portrait" src="" width="70" height="75">