原理：使用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 = ''
}
}
</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 就可以上传照片了
适用： 不需要太多操作，一次只能上传一张照片，没有预览和删除的效果，
如有需要请点击查看原文：
原文地址
