图片上传时预览的问题？？？？？？？？？？？？

产品上传图片，在新增产品时，图片的地方默认有一张图片，当有选择图片时，把默认的图片替换掉并显示出现在的图片，此时图片并没有上传，点击保存后才上传！要怎么做啊，ie8里的，最好通用些。

解决方案 »

  1.   

    参考
    如文所说 opera  safari chrome 不行 。
    ie8是没问题的 。
      

  2.   

    //得到本地图片路径
     function getPath(obj){ 
       if(obj)      {  
            if (window.navigator.userAgent.indexOf("MSIE")>=1)        { 
                     obj.select();        
                      return document.selection.createRange().text;       
                       }       else if(window.navigator.userAgent.indexOf("Firefox")>=1)   
                            {        if(obj.files)          {      
                                   return obj.files.item(0).getAsDataURL();          }    
                                       return obj.value;        }  
                                           return obj.value; 
                                                } 
                           } 这样可以得到本地图片路径，可我直接在onchange事件里把路径传给img的src它不行啊，没有显示，貌似路径中的空格都成%20啦!
      

  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">
            var loadImage = function(ele){
                var picPath   = getPath(ele);
                var image     = new Image();
                document.getElementById("imgDiv").innerHTML = "<img width='100px' height='100px' id='aPic' src='"+picPath+"'>";
            }
            var getPath = function(obj){
                if(obj){
                    if (window.navigator.userAgent.indexOf("MSIE")>=1){
                        obj.select();
                        return document.selection.createRange().text;
                    }
                    else if(window.navigator.userAgent.indexOf("Firefox")>=1){ //firefox
                        if(obj.files){
                            return obj.files.item(0).getAsDataURL();
                    }
                        return obj.value;
                    }
                    return obj.value;
                }
            }
        </script>
    </head>
    <body>
        <input type="file" name="uploadFile" id="uploadFile" onchange="loadImage(this);" />
        <div id="imgDiv">
           <img src="http://avatar.profile.csdn.net/5/A/B/2_lihuan2008a.jpg" />
        </div>
    </body>
    </html>试试 。
      

  4.   

    可以用JS把file:///d:/你的文件夹/图片.jpg这个地址去替代图片的SRC，就可以了。
      

  5.   

    zell419非常感谢你的回答，这段代码存为html运行是没有问题的，当我换成jsp页面，并且放到tomcat下时，图片不能正常显示，右键查看属性里是协议、类型、创建时间、修改时间不可用，不知道怎么回事哦！
      

  6.   

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>我的圈子-相册</title>

    <script type="text/javascript" src="/js/imgPreview/CJL.0.1.min.js"></script>
    <script type="text/javascript" src="/js/imgPreview/QuickUpload.js"></script>
    <script type="text/javascript" src="/js/imgPreview/ImagePreviewd.js"></script>

    </head> <body>
    <pubTags:head />
    <pubTags:left />
    <div id="content">
    <pubTags:menu bmenu="ste-photo" amenu="steward"/>
    <div id="main">
       <div class="phbj" class="perview">  
       <form action="lookPagesaveprivacyphoto.do" method="post"
    enctype="multipart/form-data"
    class="com.raxtone.community.img.web.action.LookPageAction" name = "theform" onsubmit="return CheckPreview(this)">
    <font color="red"><s:property value="message"/></font>
    <ul class="phleft">
    <li>
    <img src="/images/upfload.gif" />
    上传照片并预览
    </li>
    <li>
    <input id="idFile" name="pic" type="file" class="seclet" />
    </li>
    <li>
    <input type="submit" value="" class="tijiao" />
    </li>
    <li>
    <input type="button" value="返回" class="tijiao" onclick="window.history.go(-1)"/> 
    </li>
    <li>
    请上传JPG，JPEG， GIF，PNG或BMP文件，每个文件大小可以到2M
    </li>
    </ul>
    <div class="phright">
    <img id="idImg" />
    </div>
    </form><script>var ip = new ImagePreview( $$("idFile"),$$("idImg") , {
    maxWidth: 200, maxHeight: 200, action: "viewImg.jsp",onCheck: CheckPreview
    });
    ip.img.src = ImagePreview.TRANSPARENT;
    ip.file.onchange = function(){ ip.preview(); };
    //检测程序
    var exts = "jpg|gif|bmp|png|jpeg", paths = "|";
    function CheckPreview(){
    var value = this.file.value, check = true;
    if ( !value ) {
    check = false; alert("请先选择文件！");
    } else if ( !RegExp( "\.(?:" + exts + ")$$", "i" ).test(value) ) {
        check = false;
    alert("只能上传以下类型：" + exts);
        if (!window.addEventListener) {      
        document.getElementById("idFile").select();   
    document.execCommand('Delete');   
        }else { 
          document.getElementById("idFile").value = ""; 
        } 
    } else if ( paths.indexOf( "|" + value + "|" ) >= 0 ) {
    check = false; alert("已经有相同文件！");
    }
    return check;
    }</script> </body>
    </html>