asp.net FileUpload 有没有办法实现图片预览（在ie8,ie9）

asp.net FileUpload 有没有办法实现图片预览（在ie8,ie9）高分求这样的代码

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

jquery这种东西多啊。断点续传图片预览多图片
FF、IE8试过，IE9的没试过。input改下就行
<html>
<meta http-equiv=Content-Type content="text/html; charset=gb2312">
<head>
<title>js 图片上传预览</TITLE>
<script>
function previewImg(imgFile)
{
var newPreview = document.getElementById("preview1");
var path;
if(document.all) //IE
{
imgFile.select();
path = document.selection.createRange().text;
}
else
path = imgFile.files[0].getAsDataURL(); //FF
newPreview.style.backgroundImage = "url(" + path + ")";
newPreview.style.width = "100px";
newPreview.style.height = "100px";
newPreview.style.display = "block";
}
</script>
</head><body><input type="file" onchange='previewImg(this)' />
<div id="preview1"></div></body>
</html>
浏览器各种兼容
jquery-vsdoc2.js
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title><script src="Script/jquery-vsdoc2.js" type="text/javascript"></script></head>
<body>
<form id="form1" runat="server"><script type="text/javascript">
//PreviewImage
(function($) {
$.fn.PreviewImage = function(options) {
var Default = {
ImageClientId: "",
MaxWidth: 300,
MaxHeight: 300
};
$.extend(true, Default, options);
return this.each(function() {
if (Default.ImageClientId != "") {
$(this).unbind("change");
$(this).change(function() {
if ($(this).val() == "") {
$("#" + Default.ImageClientId).parent("div").hide();
return;
}
else {
$("#" + Default.ImageClientId).parent("div").show();
}
if ($.browser.msie) {
$("#" + Default.ImageClientId).attr("src", $(this).val());
}
else {
$("#" + Default.ImageClientId).attr("src", $(this)[0].files[0].getAsDataURL());
}
if ($.browser.msie && $.browser.version > 6) {
$("#" + Default.ImageClientId).hide();
$("#" + Default.ImageClientId).parent("div").css({ 'z-index': '999',
'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)',
'max-width': Default.MaxWidth + 'px', 'max-height': Default.MaxHeight + 'px',
'width': Default.MaxWidth + 'px', 'height': Default.MaxHeight + 'px'
});
var div = $("#" + Default.ImageClientId).parent("div")[0];
div.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = $("#" + Default.ImageClientId).attr("src");
}
});$("#" + Default.ImageClientId).load(function() {
var image = new Image();
image.src = $(this).attr("src");
var a = image.width ;
var b = image.height ;
if(a>200 || b>70 )
{
alert("您的图片为"+a + "x" + b +",图片大小限制为200*70以下");
image.src = "" ;
return ;
}
$(this).attr("width", a);
$(this).attr("height", b);
$(this).attr("alt", a + "x" + b);
/*
$(this).attr("width", Default.MaxWidth);
$(this).attr("height", Default.MaxHeight);
$(this).attr("alt", a + "x" + b);
*/
});
}
});
};
})(jQuery);
</script><br />
<div style="display: none;">
<img id="uploadimage" src="" /></div>
<asp:FileUpload ID="FileUpload1" runat="server" />
<script >
$(document).ready(function()
{
$("#<%=FileUpload1.ClientID %>").PreviewImage(
{ ImageClientId: "uploadimage", MaxWidth: "200", MaxHeight: "70" });
});
/*
若为<asp:Image ID="Imgup" runat="server" />控件
将uploadimage替换为<%=Imgup.ClientID %>即可
*/
</script>
</form>
</body>
</html>
http://www.cnblogs.com/cloudgamer/archive/2009/12/22/ImagePreview.html
<style type="text/css">
       #newPreview{
             FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)
        }
    </style>    <script language="javascript" type="text/javascript">
        function PreviewImg(imgFile) {
            var newPreview = document.getElementByIdx_x("newPreview");
            newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value;
            newPreview.style.width = "200px";
            newPreview.style.height = "280px";
        }
</script>  <div id="newPreview" style="border: thin solid #C0C0C0; width:200px; height:300px;"></div>
<asp:FileUpload ID="bookpic" runat="server" onchange="PreviewImg(this)" />
貌似在ff和chrome下面是取不到file的绝对路径吧。ff貌似是加密了。chrome反正取不到
这个可以有，图片上传完毕后在页面上显示上传的图片，可以使用uploadify解决此问题
Refer:
http://www.cnblogs.com/insus/archive/2012/11/13/2768951.html