<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
.img{
width:100px;
height:100px;
border:1px solid blue;
}
.big{
border:1px solid red;
}
img{
width:100px;
height:100px;
}
</style>
</head>
<body>
<div class="big">
<div class="wrap">
<input type="file">
<div class="img"></div>
</div>
</div>
<script src="jquery/dist/jquery.min.js"></script>
<script>
$('input').on('change',function(){
var str='';
str+='<input type="file"/>';
str+='<div class="img"></div>';
$('.big').append(str);
var file=this.files[0];
console.log($(this).parent().children('.img'));
readFile(file,$(this).parent().children('.img'));
})
function readFile(file,element){
// 新建阅读器
var reader = new FileReader();
// 根据文件类型选择阅读方式
switch (file.type){
case 'image/jpg':
case 'image/png':
case 'image/jpeg':
case 'image/gif':
// FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL
reader.readAsDataURL(file);
break;
}
// 当文件阅读结束后执行的方法
reader.addEventListener('load',function () {
// 如果说让读取的文件显示的话 还是需要通过文件的类型创建不同的标签
switch (file.type){
case 'image/jpg':
case 'image/png':
case 'image/jpeg':
case 'image/gif':
var img = document.createElement('img');
img.src = reader.result;
// element.append(img);
element.append(img);
element.show();
break;
}
});
}
</script>
</body>
</html>
html中的input file change 执行，但是动态添加的input change不执行
