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

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

高分求这样的代码 --------------------编程问答-------------------- 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 --------------------编程问答-------------------- 太棒了，收藏 --------------------编程问答-------------------- 已经收藏 --------------------编程问答-------------------- good

--------------------编程问答-------------------- 收藏。。。很好很强大 --------------------编程问答-------------------- 天回帖即可获得10分可用分！小技巧：教您如何更快获得可用分 --------------------编程问答-------------------- 马克！ --------------------编程问答-------------------- 兼容性真的很难搞的啊. --------------------编程问答-------------------- 哪个好用呢 --------------------编程问答-------------------- <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反正取不到 --------------------编程问答-------------------- 不一定要获得绝对路径啊，就可以上传，浏览器也不让你获得 --------------------编程问答--------------------

引用 2 楼 gdjlc 的回复:

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>

试过了，，非常管用， --------------------编程问答-------------------- 这个可以有，图片上传完毕后在页面上显示上传的图片，可以使用uploadify解决此问题 --------------------编程问答-------------------- 所说的预览都是上传到服务器再显示出来的

这能叫预览？预览是没有上传到服务器吧 --------------------编程问答-------------------- Refer:
http://www.cnblogs.com/insus/archive/2012/11/13/2768951.html

补充：.NET技术 ,  ASP.NET