法一:使用 `innerHTML` 属性:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>请上传图片</h1>
<form name="form0" id="form0">
<input type="file" multiple="multiple" class="file-input" id="file0" />
<ul id="imgList">
<!-- <li><img src="" alt=""></li> -->
</ul>
</form>
<script>
let inpt= document.getElementById("file0")
inpt.addEventListener('change',function(e){
console.log('files',e.target.files);
let files=e.target.files
let arr=[]
for(let val of files){
let imgUrl=getUrlObj(val)
if(imgUrl){
arr.push(`<li><img src="${imgUrl}"/></li>`)
}
console.log(arr);
}
document.getElementById("imgList").innerHTML=arr.join('')
})
function getUrlObj(file){
let url=null
if(window.createObjectURL){
url=window.createObjectURL(file)
}else if(window.URL){
url=window.URL.createObjectURL(file)
}else if(window.webkitURL){
url=window.webkitURL.createObjectURL(file)
}
return url
}
</script>
</body>
</html>
法二:使用 `createElement` 和 `appendChild` 方法:
<script>
let inpt= document.getElementById("file0")
inpt.addEventListener('change',function(e){
console.log('files',e.target.files);
let files=e.target.files
let arr=[]
for(let val of files){
let imgUrl=getUrlObj(val)
if(imgUrl){
let li=document.createElement('li')
let img=document.createElement('img')
img.src=imgUrl
li.appendChild(img)
document.getElementById('imgList').appendChild(li)
}
}
})
function getUrlObj(file){
let url=null
if(window.createObjectURL){
url=window.createObjectURL(file)
}else if(window.URL){
url=window.URL.createObjectURL(file)
}else if(window.webkitURL){
url=window.webkitURL.createObjectURL(file)
}
return url
}
</script>