其核心是利用将图片读取成同样大小的base64字符。
1、未上传图片
未上传的效果
2、上传图片后的预览效果
上传图片后的预览效果
jQuery核心代码:
<script>
$('.a').change(function(e) {
var purl = window.URL || window.webkitURL;
var file, img;
if((file = this.files[0])) {
img = new Image();
img.onload = function() {
$('.img').attr('src', this.src);
};
img.src = purl.createObjectURL(file);
}
})
</script>
HTML核心代码:
<img class="img" width="150" height="150">
<input type="file" class="a">