<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>多圖預覽</title>
</head>
<script>
var result=document.getElementById("result");
var file=document.getElementById("file");
function readAsDataURL(){
var file = document.getElementById("file").files;
var result=document.getElementById("result");
for(i = 0; i< file.length; i ++) {
var reader = new FileReader();
reader.readAsDataURL(file[i]);
reader.onload=function(e){
//多圖預覽
result.innerHTML = result.innerHTML + '<img src="' + this.result +'" alt="" />';
}
}
}
</script>
<p>
<label>請選擇一個文件：</label>
<input type="file" id="file" multiple="multiple" />
<input type="button" value="讀取圖像" onclick="readAsDataURL()" />
</p>
<div id="result" name="result"></div>該方式是批量多張圖片，不能實現單個圖片的選擇
若想查看，單個圖片選擇刪除，查看我另一篇文章，weui多圖上傳