input框选择图片时，将图片显示在下方
2017-07-20 本文已影响0人
blank的小粉er
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>修改logo</title>
<link rel="stylesheet" href="bootstrap.min.css">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<style>
#box img{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="container">
<form action="1.php" method="POST"
enctype="multipart/form-data">
<div class="form-group">
<input type="file" onchange='readImage(this,"#box")' name="image">
<div id="box">
<br>
</div>
</div>
<button type="submit" class="btn btn-success">确认</button>
</form>
</div>
<script>
function readImage(fileObj,box,max) {
// if(max&&fileObj.files.length>max){
// fileObj.value='';
// alert('文件数量超过上限,请重新选取')
// }
document.querySelector(box).innerHTML='';
var i=0;
var frObj = new FileReader();
frObj.onload = function() {
var img = document.createElement("img");
img.src = frObj.result;
document.querySelector(box).appendChild(img);
// if(i<fileObj.files.length){
// i++;
// frObj.readAsDataURL(fileObj.files[i]);
// }
}
frObj.readAsDataURL(fileObj.files[i]);
}
</script>
</body>
</html>
demo.png
