전방에서 사진 업로드 실시간 미리보기

<div class="dv_info_box">
	<div class="dv_pic_box">


        </div>
	<button class="btn_add_pic">    </button>
</div>

.dv_pic_item{
    width: 200px;
    height: 260px;
    margin: 5px 5px;
    float: left;
}
.btn_add_pic{
    width: 80px;
    height: 30px;
    border-radius: 6px;
    outline: none;
    border: none;
    background-color: #00BCD4;
    color: #fff;
    cursor: pointer;
    margin-top: 20px;
    margin-bottom: 20px;
}
.input_file_style{
    width: 200px;
    height: 20px;
}
.img_style{
    width: 200px;
    height: 240px;
    display: block;
    background-size: 100% auto;
}

var btnCount=0;
function initClickListener(){
    $(".btn_add_pic").click(function(){
        btnCount++;
        var t='<div class="dv_pic_item">';
        t+='<img src="" alt="" class="img_style" id="img_'+btnCount+'"/>';
        t+='<input	type="file"	class="input_file_style"	value="img_'+btnCount+'" id="file_'+btnCount+'"/>';
        t+='</div>';
        $(".dv_pic_box").append(t);
        $(".input_file_style").change(function(e){
            console.log($(this).attr("id"));
            var img=document.getElementById($(this).attr("value"));
            var obj=document.getElementById($(this).attr("id"));
            if(obj && obj[0]){
            	img.src = window.URL.createObjectURL(obj.files[0]);
            }else{
            	obj.select();
            	//ie9       blur
            	obj.blur();
                var imgSrc = document.selection.createRange().text;
                //       ，             
                try{
                    img.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                    img.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
                }
                catch(e)
                {
                    alert("          ，     ");
                    return false;
                }
                document.selection.empty();
            }
        });
    });