图片本地回显

HTML:
<div class="col-sm-8">
<div class="uploadImgBtn" id="uploadImgBtn">
<input class="uploadImg" type="file" name="file" id="Tfile">
<span id="chanimg"></span>
</div>
</div>

----------------------------------------------

JS:
$(document).ready(function(){
$("#uploadImgBtn").click(function(){
var $input = $("#Tfile");
$input.on("change" , function(){
var files = this.files;
var length = files.length;
var fr = new FileReader(),
div = document.createElement("div"),
img = document.createElement("img");
div.className = 'pic';
fr.onload = function(e){
img.src = this.result;
div.appendChild(img)
$("#chanimg").html(div.appendChild(img))
}
fr.readAsDataURL(files[0]);//读取文件
})
})
})

猜你喜欢

转载自www.cnblogs.com/PoisonousMushrooms/p/12559992.html