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

原文出处：https://blog.csdn.net/qq_34645412/article/details/76162569
项目笔记：
有借鉴有自己的理解。
思路：上传图片首先需要获取到显示图片的div的DOM节点，然后监听input的值，当input的值发生变化的时候，就将input的这个值插进div里面显示。
1.获取背景图的Dom节点
2.获取input的DOM节点
3.判断浏览器是否支持FileReader。不支持就是返回提示，支持就监听input的DOM节点。当发生改变change的时候调用读取图片值的函数，将改变后的图片值set到背景的DOM节点里面去。实现当图片上传后替换原来的图片。
4.写读取图片值的函数来读取File并把file变成url形式。
具体看代码：
html:

    <div>
        <p>上传身份证</p>

        <!--这是正面照-->
        <div class="photo">
            <a href="javascript">
                <img src="../../assets/icon/contrary.png" id="bgpic">
                <input type="file" id="IdCard">
            </a>
        </div>

        <!--这是背面照-->
        <div class="photo photo1">
            <a href="javascript">
                <img src="../../assets/icon/contrary.png" id="bgpicb">
                <input type="file" id="IdCardbg">
            </a>
        </div>
    </div>

 

 

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 (typeof FileReader === "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);
        }

        function readerfile(){                                      //读取文件的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: 1pxsolidblue;
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 ，否则即是读取的结果，绝大多数的程序都会在成功读取文件的时候，抓取这个值。

 

[javascript] view
 plain copy

 

 

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" οnchange="showPreview(this)" />  
                                <img id="portrait" src="" width="70" height="75">  
--------------------- 
作者：傻小胖 
来源：CSDN 
原文：https://blog.csdn.net/qq_34645412/article/details/76162569 
版权声明：本文为博主原创文章，转载请附上博文链接！