原理：使用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 就可以上傳照片了
適用： 不需要太多操作，一次只能上傳一張照片，沒有預覽和刪除的效果，
如有需要請點擊查看原文：
原文地址
