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

亦凉 2022-02-19 04:35 301阅读 0赞

原文出处：[https://blog.csdn.net/qq\_34645412/article/details/76162569][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