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:

<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(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 plaincopy 
  

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 plaincopy 
   
 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">

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

悦读