asp.net 控件fileupload 一选择一个图片，马上显示在img上面，jquery 如何实现？

rt

解决方案 »

  1.   

    <script language="javascript" type="text/javascript"> 
            function PreviewImg(imgFile) 
            {    
                var newPreview = document.getElementById("newPreview"); 
                newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value; 
                newPreview.style.width = "80px"; 
                newPreview.style.height = "60px"; 
            } 
        </script> 
    <asp:FileUpload ID="FileUpload1" runat="server" onchange="PreviewImg(this)"  /> 
    <div id="newPreview"> </div> 
    function $(o){return document.getElementById(o);} 
    function CheckImg(o,img) 
    { 
        if (!/\.((jpg)|(bmp)|(gif)|(png))$/ig.test(o.value)) 
        { 
            alert('只能上传jpg,bmp,gif,png格式图片!'); 
            o.outerHTML = o.outerHTML; 
        } 
        else 
        { 
            $(img).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src=o.value; 
        } 
    } <asp:FileUpload ID="FileUpload1" runat="server"  onchange="CheckImg(this, 'img');"  /> 
    <div id="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src= <%= pic%>,sizingMethod=scale);width:88px;height:113px;"> </div> 
    public string pic=""; 插件
      

  2.   


      <style type="text/css">
       #newPreview{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);}
      </style>
    以上代码放到head内
    <script language="javascript" type="text/javascript">   
             function PreviewImg(imgFile)   
                 {  var newPreview = document.getElementById("newPreview");   
                    newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value;  
                     newPreview.style.width = "80px";   
                    newPreview.style.height = "60px"; 
                  } 
     </script>  <asp:FileUpload ID="Fud_Pic" runat="server" onchange="PreviewImg(this)" /><div id="newPreview"></div> 
    以上代码放到body内用过了，在IE6、7、8都适用
      

  3.   

    <!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 type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>    <script>
            var showImg = function(id) {            var v = $('#' + id).val();
                var img = $('#img')[0];
                img.src = 'file:///' + v;
            }
            var showBtn = function() {
                $('#span').show();
            }
            var imgLoad = function() {
                $('#centerLayer').show();
            }
            var btnClose = function() {
                $('#centerLayer').hide();
            }
        </script></head>
    <body>
        <form id="form1" runat="server">
        <asp:FileUpload ID='file' runat="server" onchange='showBtn();' />
        <span id="span" style="display: none;">
            <input type="button" value="预览" onclick='showImg("<%=file.ClientID %>");' />
        </span>
        <div id="centerLayer" style="position: absolute; left: 200px; top: 30px; z-index: 6;
            display: none;">
            <img id='img' align="middle" onload='imgLoad();' />
            <input type="button" value="关闭" onclick='btnClose();' />
        </div>
        </form>
    </body>
    </html>
      

  4.   


    恩，是的。因为 file.value 在 ff 下只能取到图片名，取不到在客户端的全路径但有人变相的实现了。
      

  5.   

     var v = $('#' + id).val();
    为什么根本就得不到值呢