上传图片时预览效果

在FileUpload空间或其他上传图片的预览效果

控件：<asp:FileUpload ID="CheHao" Width="300" runat="server" οnchange="onUploadImgChange(this,'CheHao')" />

sender:事件源
SPname:空间ID
function onUploadImgChange(sender, SPname) {
if (!sender.value.match(/.jpg|.gif|.png|.bmp/i)) {
alert('图片格式无效！');
return false;
}

var objPreview = document.getElementById('preview_' + SPname + '');
var objPreviewFake = document.getElementById('preview_fake_' + SPname + '');
var objPreviewSizeFake = document.getElementById('preview_size_fake');

if (sender.files && sender.files[0]) {
objPreview.style.display = 'block';
objPreview.style.width = '200';
objPreview.style.height = '150';

// Firefox 因安全性问题已无法直接通过 input[file].value 获取完整的文件路径
objPreview.src = sender.files[0].getAsDataURL();
} else if (objPreviewFake.filters) {
// IE7,IE8 在设置本地图片地址为 img.src 时出现莫名其妙的后果
//（相同环境有时能显示，有时不显示），因此只能用滤镜来解决

// IE7, IE8因安全性问题已无法直接通过 input[file].value 获取完整的文件路径
sender.select();
//在IE9下，document.selection.createRange()拒绝访问
sender.blur();
var imgSrc = document.selection.createRange().text;

objPreviewFake.filters.item(
'DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;
objPreviewSizeFake.filters.item(
'DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;

autoSizePreview(objPreviewFake,
objPreviewSizeFake.offsetWidth, objPreviewSizeFake.offsetHeight);
objPreview.style.display = 'none';
}
}

转载于:https://www.cnblogs.com/jameslif/archive/2012/05/10/2494247.html