jquery 获取上传图片的宽高和预览图

最新推荐文章于 2024-08-27 04:41:20 发布

原创最新推荐文章于 2024-08-27 04:41:20 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #file

HTML 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现文件上传后即时显示图片预览效果的方法，并提供了完整的代码示例。该方法通过读取文件对象的数据并转换为Data URL来展示上传的图片，同时获取图片的尺寸。

$('#pic').change(function(){
var file = this;
createReader(file.files[0], function (w, h, u) {
// alert(w + ' '+ h +' '+u);
$('#lod_pic').attr("src",u);
$('#pic_info').text("（图片尺寸："+w+"x"+h+"）");
});
})
createReader = function(file, whenReady) {
var reader = new FileReader;
reader.onload = function (evt) {
var image = new Image();
image.onload = function () {
var pic_url = this.src;
var width = this.width;
var height = this.height;
if (whenReady) whenReady(width, height , pic_url);
};
image.src = evt.target.result;
};
reader.readAsDataURL(file);
}