JavaScript 获取上传图片文件的尺寸和预览图 - 文章教程

JavaScript 获取上传图片文件的尺寸和预览图

发布于 2018-06-06 字数 2135 浏览 2329 评论 0

默认情况下,我们上传图片文件如果使用表单上传,那么就只有一个简单的文件选择文本框,而且这个表单元素还不能设置外观样式,不能修改其属性,为了提升我们网站的用户体验,我们可以在上传之前,获取被上传文件的一些信息,展示到网页中,也可以判断你是不是一个合法的文件。

JavaScript 获取上传图片文件的尺寸和预览图

我们首先编写一个文件域和一个按钮,然后把文件域的高度设置为 0 ,直接显示这个美化过的按钮。

<input type="file" name="pictureFile" class="pictureFile" id="pictureFile" />
<button class="btn btn-info select-pictureFile">点击选择图片</button>

添加个 DIV 元素,用于显示被上传图片文件的缩略图

<div class="picture-view"></div>

这里我们使用 jQuery 来辅助开发这个功能,首先点击按钮的时候,自动触发文件域的点击事件

$('.select-pictureFile').click(function(){
	$('.pictureFile').trigger('click');
});

这时候也就是相当于我们手动点击了文件域一样,会弹出来一个文件浏览器,让我们选择上传的文件。

在我们选择文件以后,会触发文件域的 change 事件,我们直接在回调函数里面编写用户选择文件以后的处理方式:

获取缩略图

$('.select-pictureFile').html('已选择图片');
var r = new FileReader();
f = document.getElementById('pictureFile').files[0];
r.readAsDataURL(f);
r.onload = function(e){
	$('.picture-view').html('<img src="' + this.result + '"/>');
};

获取图片的尺寸

var _URL = window.URL || window.webkitURL;
img = new Image();
img.onload = function () {
	if(this.width < 1200){
		alert('图片尺寸太小');
	}
};
img.src = _URL.createObjectURL(f);

根据获取到的尺寸、文件大小,我们可以在做一步判断提示用户文件是否和合法的,这里我们使用了 FileReader API,他可以读取图片的信息,包括转换为 Base64 编码,这样我们就可以在网页中显示缩略图。

new Image() 是创建一个图片加载器,我们可以为其指定一个 src 图片地址,然后加载这个图片。

注意:img.src 一定要写在 img.onload 后面,不然 IE 会报错。

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

Jay

文章 0 评论 0

guowei007

文章 0 评论 0

2668157715

文章 0 评论 0

HY阳

文章 0 评论 0

想挽留

文章 30 评论 3