asp.net 上传图片预览

我现有一页面需作上传图片预览
页面代码如下：<%@ Page Language="C#" AutoEventWireup="true" CodeFile="D_Driver_Insert.aspx.cs"
    Inherits="Driver_D_Driver_Insert" %><%@ Register Src="~/WebUserControl.ascx" TagName="SiteMap" TagPrefix="Site" %>
<!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>
        <%=ConfigurationManager.AppSettings["title"].ToString() %>
    </title>
    <link href="../Stylesheet/StyleSheet.css" type="text/css" rel="stylesheet" />
    <link href="../Stylesheet/CalenderStyle.css" type="text/css" rel="stylesheet" />    <script language="javascript" type="text/javascript" src="../JavaScript/CalenderScript.js"></script>    <script language="javascript" type="text/javascript" src="../JavaScript/JScript.js"></script>    <script language="javascript" type="text/javascript" src="../JavaScript/ImagesPreview.js"></script>    <script language="javascript" type="text/javascript">
//返回
function btn_Back_onclick() {
window.history.back();
}//表单提交前严整
function CheckForm(){
    var driverName = document.getElementById('txtName');
    if(driverName.value==""){
        document.getElementById('lblMessage').innerHTML="请填写驾驶员姓名.";
        driverName.focus();
        return false;
    }
    
    var licenceCode = document.getElementById('txtLicenceCode');
    if(licenceCode.value==""){
        document.getElementById('lblMessage').innerHTML="请认真填写驾照号.";
        licenceCode.focus();
        return false;
    }else if(isNaN(licenceCode.value)){
        document.getElementById('lblMessage').innerHTML="驾照号只能为数字.";
        licenceCode.focus();
        return false;
    }
    
    var Id = document.getElementById('txtCardId');
    if(Id.value==""){
        document.getElementById('lblMessage').innerHTML="请填写驾驶人员身份证号.";
        Id.focus();
        return false;
    }else if(Id.value.length != 18 && Id.value.length != 15){
        document.getElementById('lblMessage').innerHTML="身份证只能为15位或18位.";
        Id.focus();
        return false;
    }
    
    var birthDay = document.getElementById('txtBirthday');
    if(birthDay.value==""){
        document.getElementById('lblMessage').innerHTML="请选择出生日期";
        return false;
    }else if(!IsDate(birthDay.value)){
        document.getElementById('lblMessage').innerHTML="出生日期格式不正确";
        return false;
    }
    
    var licenceDate = document.getElementById('txtLicenceDate');
    if(licenceDate.value==""){
        document.getElementById('lblMessage').innerHTML="请选择领证日期.";
        return false;
    }else if(!IsDate(licenceDate.value)){
        document.getElementById('lblMessage').innerHTML="领证日期格式不正确";
        return false;
    }
    
    return true;
}    </script></head>
<body>
    <form id="form1" runat="server">
        <Site:SiteMap ID="MySiteMap" runat="server" />
        <br />
        <div style="height: 100%; width: 100%; text-align: center;">
            <table class="Form" style="margin-top: 0px;">
                <tr>
                    <td class="Title" colspan="4">
                    </td>
                </tr>
                <tr>
                    <td align="center" style="width: 75px; text-align: right">
                        姓名：</td>
                    <td style="width: 160px; text-align: left">
                        <asp:TextBox ID="txtName" runat="server" CssClass="Text" MaxLength="50" Width="150px"></asp:TextBox></td>
                    <td style="width: 90px; text-align: right">
                        图片预览：</td>
                    <td rowspan="6" style="width: 160px; text-align: center">
                        <div id="divShow" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
                            width: 135px; height: 180px;">
                        </div>
                <tr>
                    <td style="width: 75px; text-align: right;">
                        上传图片：</td>
                    <td style="text-align: left;" colspan="3">
                        <asp:FileUpload ID="FileUpload_Driver_Img" runat="server" Width="360px" CssClass="Text" /></td>
                </tr>
                <tr>
                    <td colspan="4" style="text-align: center">
                        <font style="color: Gray;">注意：图片大小不能超过1M，格式只能为GIF、JPG、BMP</font></td>
                </tr>上传图片预览脚本如下：function setImg(o)
{
var width_img;
var height_img;o.style.visibility = "visible";
width_img=o.offsetWidth;
height_img=o.offsetHeight;var width=135;   //预定义宽
var height=180;  //预定义高var ratW;        //宽的缩小比例
var ratH;        //高的缩小比例
var rat;         //实际使用的缩小比例
if(width_img<width && height_img<height)
{
//如果比预定义的宽高小，原图显示。
o.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "image";
return;
}else{
//如果大的化，要把 sizingMethod改成scale 如果属性是image,不管怎么改div的宽高，都不起作用
o.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "scale";
}
ratH=height/height_img;
ratW=width/width_img;
if(ratH<ratW)       //选择最小的作为实际的缩小比例
rat=ratH;
else
rat=ratW;
width_img=width_img * rat;
height_img=height_img * rat;
o.style.width=width_img;
o.style.height=height_img;
}
function ShowImage(fileupload){
alert(document.all[fileupload.id].value);
//处理前是原图，先将其隐藏，
document.all.divShow.style.visibility = "hidden";
document.all.divShow.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = path;
//过一小会获取div的宽高.
setTimeout("setImg(document.all.divShow)",100);
}后台注册脚本        //控件注册脚本
        this.txtBirthday.Attributes.Add("onfocus", "HS_setDate(this)");
        this.txtLicenceDate.Attributes.Add("onfocus", "HS_setDate(this)");
        this.FileUpload_Driver_Img.Attributes.Add("onchange", "ShowImage(this);");
        this.btn_Insert.Attributes.Add("onclick", "return CheckForm()");浏览器IE 7.0 以前都能正常预览，现在出现以下问题：
测试alert(出this.value只能取到文件名，而取不到文件的全路径。)，在线求助，急！！

解决方案 »

  1.   


     我用的这个控件 html的 <INPUT class="upbtn"  onpropertychange="javascript:FileUpload_onselect()"  id="txtUpFile" type="file" size="80" name="txtUpFile" runat="server"   unselectable="on"> document.form1.txtUpFile.value 要不你修改这个试试看
      

  2.   

    只能上传上去才能浏览。IE7.0以上不支持在线立即浏览。 FF也不支持
      

  3.   


    哥门儿，用这个话的，SaveAs的时候又怎么办呢？
      

  4.   

    var file = document.getElementById ("txtUpFile");alert(file.value);试试
      

  5.   

    IE8 处于安全 把 获取URl改成了获取文件名了。
    别找了，这我已经找过了。
    只能换种方式去拼接它的完整路径了。
      

  6.   


    [code=JScript]
    js方法：
    function PreviewImg(imgFile)
    {    
        //新的预览代码，支持 IE6、IE7。    
        var newPreview = document.getElementById('<%=newPreview.ClientID %>');
        newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value;
    }
      
      function onLoadImg()
      {
            var newPreview = document.getElementById('<%=newPreview.ClientID %>');
            if(document.getElementById('<%=txtCoverPicPath.ClientID %>').value!='')
                newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.getElementById('<%=txtCoverPicPath.ClientID %>').value;
      }其中
    <body onload="onLoadImg()"> ---注意这里，
    显示图片：<div id="newPreview" name="newPreview" runat="server" style="width: 118px; height: 163px;  background:url(../images/noPic.gif); border:0px"></div>
    上传：<input id="fileCoverPicID" runat="server" type="file" onchange="javascript:PreviewImg(this);" style="width: 407px; display:block" /> 
    </body>[/code]
      

  7.   


    <?xml version="1.0" encoding="gb2312"?>
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>本地图片预览代码（支持 IE6、IE7）</title>
    <style type="text/css">
    #newPreview
    {
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
    }
    </style>
    <script type="text/javascript" language="javascript">
    <!--
    function PreviewImg(imgFile)
    {
        //原来的预览代码，不支持 IE7。
        var oldPreview = document.getElementById("oldPreview");
        oldPreview.innerHTML = "<img src=\"file:\\\\" + imgFile.value + "\" width=\"80\" height=\"60\" />";
        
        //新的预览代码，支持 IE6、IE7。
        var newPreview = document.getElementById("newPreview");
        newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value;
        newPreview.style.width = "80px";
        newPreview.style.height = "60px";
    }
    -->
    </script>
    </head><body><p>说明：以下针对的是互联网情况，如果您在本地作测试，比如输入的地址是：http://127.0.0.1/...，则可以看到全部预览。</p><hr /><p>如果您使用的是 IE6，则可以看到以下预览；如果您使用的是 IE7，则看不到以下预览。</p>
    <div id="oldPreview"></div><hr /><p>不论您使用的是 IE6 还是 IE7，均可以看到以下预览。</p>
    <div id="newPreview"></div><hr /><p>请选择一个图片进行预览：<input type="file" size="20" onchange="javascript:PreviewImg(this);" /></p></body></html>这个这个
      

  8.   

    我单独把19楼朋友的代码复制下来运行可以，怎么加到我项目里，就又变成了“系统找不到指定资源”了啊！！！神啊！救救我吧！IE让我痛并快乐着……UP，继续求解。
      

  9.   

    我测试过19楼的方法了，如果是复制代码到html，确实是可行的，但是改成aspx测试的话，就出和我同样的问题了。
    系统找不到指定资源。
    继续求解。
      

  10.   

    19楼的..IE8照样不行..IE7可以..
      

  11.   

    这里有一个兼容ie和ff的图片上传预览效果
      

  12.   

    var Preview = document.getElementById("Preview");                    
    upload.select();
    var realpath = document.selection.createRange().text; //获得图片真实路径             
                Preview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = "file:\\\\localhost\\" + realpath;//客户机图片地址
      

  13.   

        function getFullPath(obj) {
            if (obj) {
                //ie 
                if (window.navigator.userAgent.indexOf("MSIE") >= 1) {
                    obj.select();
                    return document.selection.createRange().text;
                }
                //firefox 
                else if (window.navigator.userAgent.indexOf("Firefox") >= 1) {
                    if (obj.files) {
                        return obj.files.item(0).getAsDataURL();
                    }
                    return obj.value;
                }
                return obj.value;
            }
        }