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

Question

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

我们首先编写一个文件域和一个按钮，然后把文件域的高度设置为 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 会报错。