前言
略
代码
<!DOCTYPE html>
<html lang="zh" >
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.preview-item {width:400px;height:300px;overflow:hidden;}
</style>
</head>
<body class="white-bg">
<input type="file" name="avatar" id="inputImage" accept="image/*" onchange="change()" multiple />
<div id="previewContainer"></div>
<script type="text/javascript">
function change() {
var inputImage = document.getElementById("inputImage");
var files = inputImage.files;
var previewContainer = document.getElementById("previewContainer");
while(previewContainer.hasChildNodes()){ previewContainer.removeChild(previewContainer.firstChild); }
for (var i = 0; i < files.length; i++) {
var file = files[i];
var imageType = /^image\//;
if (!imageType.test(file.type)) {
continue;
}
var img = document.createElement("img");
img.classList.add("preview-item");
img.file = file;
previewContainer.appendChild(img); // previewContainer是用来预览图片的div
var reader = new FileReader();
reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
reader.readAsDataURL(file);
}
}
</script>
</body>
</html>
参考
在web应用程序中使用文件
