原文出處：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"); //獲取背景圖片的DOMvar ins = document.getElementById("IdCard"); //獲取input的DOMvar resbg = document.getElementById("bgpicb");var insbg = document.getElementById("IdCardbg");if (typeof FileReader === "undefined") { //判斷瀏覽器是否支持FileReaderres.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(){ //讀取文件的filevar 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?
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！

總結

以上是生活随笔為你收集整理的ionic上传身份证正反面照片、上传图片、FileReader使用 （赞、实用）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。