原理：使用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>請(qǐng)選擇一個(gè)圖像文件(請(qǐng)使用高級(jí)瀏覽器瀏覽：如Chrome，F(xiàn)irefox)：</label><br>
<input type="file" id="file_input" />
</p>
<div id="result">
<!-- 這里用來顯示讀取結(jié)果 -->
</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("請(qǐng)確保文件為圖像類型");
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 標(biāo)簽
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("請(qǐng)確保文件為圖像類型");
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>
相關(guān)資料 本人比較菜 在嵌套html的時(shí)候錯(cuò)誤百出，找了一些資料 希望對(duì)你們有用：
position 是相對(duì)于 element 元素的位置吼旧，并且只能是以下的字符串之一：
beforebegin：在 element 元素的前面凰锡。
afterbegin：在 element 元素的第一個(gè)子節(jié)點(diǎn)前面。
beforeend：在 element 元素的最后一個(gè)子節(jié)點(diǎn)后面圈暗。
afterend：在 element 元素的后面掂为。
text 是字符串，會(huì)被解析成 HTML 或 XML员串，并插入到 DOM 樹中勇哗。
// <div id="one">one</div>
var d1 = document.getElementById('one');
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');
// 此時(shí)，新結(jié)構(gòu)變成：
// <div id="one">one</div><div id="two">two</div>
參考Element.insertAdjacentHTML()
適用范圍：
優(yōu)點(diǎn)：代碼簡(jiǎn)潔寸齐，只需要在一個(gè)容器上和一個(gè)input上 輸入1個(gè)id 就可以上傳照片了
適用： 不需要太多操作欲诺，一次只能上傳一張照片，沒有預(yù)覽和刪除的效果渺鹦，
如有需要請(qǐng)點(diǎn)擊查看原文：
原文地址
