北漂IT民工 的博客

一段HTML图片上传前显示图片的代码

一段使用jquery图片上传前显示图片的代码,来源:

http://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded


一般情况下,javascript无法直接获取本地图片的地址,所以需要利用FileReader里的readAsDataURL读取隐藏的文件地址。

并在加载完文件后通过访问e.target.result显示出来。



//Image show on change input file

if ($(‘input[type=file]’).length > 0) {

$(‘input[type=file]’).change(function() {

if (this.files && this.files[0]) {

var reader = new FileReader();

reader.onload = function(e) {

$(‘ul li a img’).attr(‘src’, e.target.result).width(90).height(90);

};

reader.readAsDataURL(this.files[0]);

}

});

}