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

控件:<asp:FileUpload ID="CheHao" Width="300" runat="server" onchange="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';
}
}

相关文章:

  • 2021-12-11
  • 2021-04-23
  • 2021-08-18
  • 2022-12-23
  • 2021-06-09
  • 2021-12-12
  • 2021-09-01
猜你喜欢
  • 2021-09-18
  • 2021-08-16
  • 2022-12-23
  • 2022-01-07
  • 2022-12-23
相关资源
相似解决方案