input多选图片与展示

input标签

在使用input选择文件时遇到了 在遍历input file.files 只显示最后一个，修改如下：

CSS:

<style type="text/css">
#view{}
#view{} .imgbox{float:left;position:relative;width:100px;height: 100px;margin-left: 10px;margin-top: 10px;
padding:5px;border:solid 1px red;border-radius: 5px;;}
#view{} .imgbox .close{border: solid 1px red;position: absolute;top: -15px;
width: 20px;height: 20px; display: inherit;cursor: pointer;text-align: center;background: red;color: #fff;right: -10px;z-index: 20;border-radius: 100%;}
#view{} .imgbox input{width:100%;height: 100%;z-index: 10;}
</style>

html:

<input type="file" onchange="load(this)" multiple="multiple" accept="image/*" class='myfile'></input>

<div id="view"></div>

JS：

<script>
$('body').on('click','.close',function(){
$(this).parent('.imgbox').remove();
});

function load(file) {
var num=1;
if (file.files) {
for (var i = 0; i < file.files.length; i++) {
var reader = new FileReader();
reader.readAsDataURL(file.files[i]);
reader.onload = function(evt) {
var imgbox=$('<div></div>');
imgbox.addClass('imgbox');
$('#view').append(imgbox);

var close=$('<div>&times;</div>');
close.addClass('close');
close.appendTo(imgbox);

var imgs = $('<input type="image" />');
imgs.attr('name','mum'+num);
num++;
imgs.appendTo(imgbox);
imgs.attr('src', evt.target.result);
}
}
}
}

</script>