前端选择图片并进行预览

小编最近在写项目，项目需求是这样的，我选择图片就能进行预览，奈何小编对前端是一窍不通，百度的又和我想要的预期效果不太一样，只能自己琢磨，终于琢磨出来了，有需要的小伙伴可以看看。话不多说，看代码

<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


<div class="a">
	
</div>
<button id='num' num='0' onclick="add()">+</button>
<div><span id="showimg"></span></div>


<script type="text/javascript">
//预览图片
var i=0
function add(){
	i++;
	var str='<input id="file'+i+'" name="file" type="file" onchange="show(this)"/>';
	$('.a').append(str);
}
function show(e){
	$("#showimg").append("<img src='"+URL.createObjectURL($(e)[0].files[0])+"' width=150px>");  
}
</script>

整体效果如下：

如此循环，就完成了，看起来很简单，但是小编对前端奈何一窍不通，好在解决了。