前端实现图片上传实时预览的两种方式

前端实现图片上传实时预览

方法一：

Html代码:

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


        </div>
	<button class="btn_add_pic">添加图片</button>
</div>

Css样式：

.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;
}

Js代码：

var btnCount=0;
function initClickListener(){
    $("