纯javascript图片上传预览

作者:沙师弟时间:2013-05-31
图片上传预览是一种在图片上传之前对图片进行本地预览的技术,但是一般要先上传到服务器才能预览,但为了提高用户体验,网上已经有很多变通或先进的方法来实现。 其中原理的,在ie用将上传图转成filter滤镜的方式的预览图,而chrome、firefox等现代浏览器则是通过base64编码实现,下面代码共享给大家有兴趣的可以玩玩。 html代码:
<div id="preview"></div>
<input type="file" onchange="previewImage(this)" id="f" />
css代码:
*{ margin: 0px; padding: 0px; }
#preview{ height: 100px; border:1px solid #000;}
#imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}
js代码:
function previewImage(file) {
	var MAXWIDTH = 100,
	MAXHEIGHT = 100,
	div = document.getElementById('preview');

	if (file.files & amp;  & amp; file.files[0]) {
		var reader = new FileReader();

		reader.onload = function (e) {
			var img = '<img src="' + e.target.result + '" onload="fixImage( this, 100, 100 );" />';
			div.innerHTML += img;
		}

		reader.readAsDataURL(file.files[0]);
	} else {
		var sFilter = 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
		file.select();
		file.blur();
		var src = document.selection.createRange().text;
		sFilter += src + '\")';

		div.innerHTML += "<div style='width:100px; height: 100px; float:left;" + sFilter + "'></div>";

	}
}

//功能:等比例压缩图片,当图片较小时,垂直居中
function fixImage(img, w, h) {
	var newImg = new Image(); //获得图片的原始尺寸
	newImg.src = img.src;

	var lh; //用于保存img.height,IE下隐藏的图片读取不到,需currentStyle解决

	if (newImg.width / newImg.height & gt;  = w / h) {
		if (newImg.width & gt; w) {
			img.width = w;
			img.height = w * newImg.height / newImg.width;
			lh = window.ActiveXObject ? parseInt(img.currentStyle['height']) : img.height;
			img.style.marginTop = (h - lh) / 2 + 'px'; //顺手垂直居中
		} else {
			img.width = newImg.width;
			img.height = newImg.height;
			lh = window.ActiveXObject ? parseInt(img.currentStyle['height']) : img.height;
			img.style.marginTop = (h - lh) / 2 + 'px'; //顺手垂直居中
		}
	} else {
		if (newImg.height & gt; h) {
			img.height = h;
			img.width = newImg.width * h / newImg.height;
		} else {
			img.width = newImg.width;
			img.height = newImg.height;
		}
	}
}