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

发布于 2018-06-06 14:27:51 字数 1636 浏览 2627 评论 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 会报错。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

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

列表为空,暂无数据

关于作者

JSmiles

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

0 文章
0 评论
84935 人气
更多

推荐作者

淹不死的鱼

文章 0 评论 0

zhangMack

文章 0 评论 0

爱的故事

文章 0 评论 0

linces

文章 0 评论 0

早乙女

文章 0 评论 0

鸵鸟症

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。