h5页面使用FileReader读取本地图片文件并显示

原理：使用input的 type="file" 属性 input的 this.files[0] 值，首先判断是否为img类型，并且获取到img的路径， innerHtml 到所要展示图片的 divbox中。

image.png

效果图：

(image.png

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<title>html5camera</title>
</head>
<body>
<div id="main">
  <div class="demo">
    <p>
      <label>请选择一个图像文件(请使用高级浏览器浏览：如Chrome，Firefox)：</label><br>
      <input type="file" id="file_input" />
    </p>
    <div id="result"> 
      <!-- 这里用来显示读取结果 --> 
    </div>
  </div>
  <br/>
  
  <br/>
</div>
<script type="text/javascript">
    var result = document.getElementById("result");
    var input = document.getElementById("file_input");
    
    if(typeof FileReader === 'undefined'){
        result.innerHTML = "抱歉，你的浏览器不支持 FileReader";
        input.setAttribute('disabled','disabled');
    }else{
        input.addEventListener('change',readFile,false);
    }
                
                
    function readFile(){
        var file = this.files[0];
        if(!/image\/\w+/.test(file.type)){
            alert("请确保文件为图像类型");
            return false;
        }
        var reader = new FileReader();
        reader.readAsDataURL(file);
        
        reader.onload = function(e){
            //alert(3333)
            //alert(this.result);
            result.innerHTML = '![]('+this.result+')'
        }
    }
</script>
/*******02****/
<a href="javascript:void(0)" class="fh715-top-dvh2" id="fh715topdvhh">
                        <ul id="fh715-top-dvh2ul">
                            <li><img src="image/images/1F.png" alt="头像" /> </li>
                        </ul>
                
                        <input type="file"  id="fh715topdvip"/>
</a>

<script>
 var result = document.getElementById("fh715-top-dvh2ul"); //主容器
    var inputt = document.getElementById("fh715topdvip");//input 标签
      
function addipu(d1,d2,d3){ 
      if(typeof FileReader === 'undefined'){
            d1.innerHTML = "抱歉，你的浏览器不支持 FileReader";
            d2.setAttribute('disabled','disabled');
       }else{
            inputt.addEventListener('change',readFile,false);
        }
    function readFile(){
        var file = this.files[0]; 
        if(!/image\/\w+/.test(file.type)){ 
            alert("请确保文件为图像类型");
            return false;
        }
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function(e){
             d1.innerHTML=""
           d1.insertAdjacentHTML('afterBegin', '<li><img src="'+this.result+'" alt="证件照片"/></li>');
        } 
     }
}
    addipu(result,inputt);
}

</script>


</body>
</html>

相关资料本人比较菜在嵌套html的时候错误百出，找了一些资料希望对你们有用：
position 是相对于 element 元素的位置，并且只能是以下的字符串之一：
beforebegin：在 element 元素的前面。
afterbegin：在 element 元素的第一个子节点前面。
beforeend：在 element 元素的最后一个子节点后面。
afterend：在 element 元素的后面。
text 是字符串，会被解析成 HTML 或 XML，并插入到 DOM 树中。

// <div id="one">one</div> 
var d1 = document.getElementById('one'); 
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');

// 此时，新结构变成：
// <div id="one">one</div><div id="two">two</div>

参考Element.insertAdjacentHTML()

适用范围：

优点：代码简洁，只需要在一个容器上和一个input上输入1个id 就可以上传照片了
适用：不需要太多操作，一次只能上传一张照片，没有预览和删除的效果，

如有需要请点击查看原文：
原文地址

h5页面使用FileReader读取本地图片文件并显示

推荐阅读更多精彩内容