在做一个图片上传的功能,但是需要预览该图片,在HTML下
如下代码就可以实现预览功能,但是JSP内就不可以
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 
  <script type="text/javascript">
  function showPicture(){
  var path=document.form1.picturePath.value;
  document.getElementById("img").src=path;
  
  }
  </script>
 </head>
 
 <body>
  <form name="form1" action="#" method="post"> 
  <table> 
        <tr> <td><img src=""  name="img" id="img" height="200px"/></td>  </tr> 
        <tr> <td><input type="file" name="picturePath" onchange="showPicture();"/></td>
<td><input type="submit" value="确定上传"></td> 
</tr>
 </table> 
 </form>
 </body>
</html>求源码 谢谢,网上的如1.<html>   
2.<head></head>   
3.<script language=JavaScript>   
4.var flag=false;   
5.function DrawImage(ImgD){   
6.   var image=new Image();   
7.   image.src=ImgD.src;   
8.   if(image.width>0 && image.height>0){   
9.    flag=true;   
10.    if(image.width/image.height>= 120/80){   
11.     if(image.width>120){     
12.     ImgD.width=120;   
13.     ImgD.height=(image.height*120)/image.width;   
14.     }else{   
15.     ImgD.width=image.width;     
16.     ImgD.height=image.height;   
17.     }   
18.     ImgD.alt=image.width+"×"+image.height;   
19.     }   
20.    else{   
21.     if(image.height>80){     
22.     ImgD.height=80;   
23.     ImgD.width=(image.width*80)/image.height;        
24.     }else{   
25.     ImgD.width=image.width;     
26.     ImgD.height=image.height;   
27.     }   
28.     ImgD.alt=image.width+"×"+image.height;   
29.     }   
30.    }   
31.   /*else{   
32.    ImgD.src="";   
33.    ImgD.alt=""  
34.    }*/   
35.   }    
36.  
37.function FileChange(Value){   
38.flag=false;   
39.document.all.uploadimage.width=10;   
40.document.all.uploadimage.height=10;   
41.document.all.uploadimage.alt="";   
42.document.all.uploadimage.src=Value;   
43.}   
44.function FileChange1(Value){   
45.flag=false;   
46.document.all.uploadimage1.width=10;   
47.document.all.uploadimage1.height=10;   
48.document.all.uploadimage1.alt="";   
49.document.all.uploadimage1.src=Value;   
50.}   
51.function BeforeUpLoad(){   
52.if(flag) alert("OK");else alert("FAIL");   
53.}   
54.</script>   
55.  
56.<body>   
57.<IMG id="uploadimage" height=10 width=10 src=""     
58.                onload="javascript:DrawImage(this);"   >   
59.            <input type="file"  id="upload" onchange="javascript:FileChange(this.value);"/>   
60.</body>   
61.</html>  
这样的代码就别贴给我了  谢谢
--------------------------------------------------------------------

解决方案 »

  1.   

    JSP 在用戶端呈現時,就只是單純的 HTML。
    如果你想要做的事是,上傳以前先看看圖檔內容,那你就只能用你貼的那些html+jacascript的程式碼來看。
      

  2.   

    试试下面的方法,肯定可以 ,我项目中就是用这个showOriginalPhoto()方法调原图的
    <img id="photo" src="trade/check/ShowPic?table=trade&id=${trade.request_code }" height="150" width="200" ondblclick="showOriginalPhoto('photo')"/>function   showOriginalPhoto(obj)   
     {   
        var img = document.getElementById(obj);   
        var src = img.src;  
        var newwin = window.open("","","width=700,height=600");   
        newwin.document.write("<img src='"+src+"'>");   
    }   
      

  3.   

    补充一下:是在IE8下面 我尝试了如下代码可以在Firefox下面成功执行<!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>
        <title>Firefox3,IE6,IE7,IE8上传图片预览</title>
    <style type="text/css">
    #preview_wrapper{
    display:inline-block;
    width:300px;
    height:300px;
    background-color:#CCC;
    }
    #preview_fake{
    /* 该对象用于在IE下显示预览图片
    */
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
    }
    #preview_size_fake{
    /* 该对象只用来在IE下获得图片的原始尺寸,无其它用途
    */
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
    visibility:hidden;
    }
    #preview{
    /* 该对象用于在FF下显示预览图片
    */
    width:300px;
    height:300px;
    }
    </style>
    <script type="text/javascript">
    function onUploadImgChange(sender){
    if( !sender.value.match(/.jpg|.gif|.png|.bmp/i)){
      alert('图片格式无效!');
      return false;
    }var objPreview = document.getElementById('preview' );
    var objPreviewFake = document.getElementById('preview_fake' );
    var objPreviewSizeFake = document.getElementById('preview_size_fake' );
    if( sender.files &&sender.files[0] ){
      objPreview.style.display ='block';
      objPreview.style.width ='auto';
      objPreview.style.height ='auto';
     
      // Firefox 因安全性问题已无法直接通过input[file].value
      objPreview.src =sender.files[0].getAsDataURL();
    }else if( objPreviewFake.filters
    ){
      // IE7,IE8 在设置本地图片地址为 img.src 时出现莫名其妙的后果
      //(相同环境有时能显示,有时不显示),因此只能用滤镜来解决
     
      // IE7, IE8因安全性问题已无法直接通过 input[file].value 获取完整的文件路径
      sender.select();
      var imgSrc =document.selection.createRange().text;  
      objPreviewFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src= imgSrc;
      objPreviewSizeFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src= imgSrc;  
      autoSizePreview( objPreviewFake,objPreviewSizeFake.offsetWidth,objPreviewSizeFake.offsetHeight );
      objPreview.style.display ='none';
    }
    }
    function onPreviewLoad(sender)
    {autoSizePreview(sender,sender.offsetWidth, sender.offsetHeight );}
    function autoSizePreview( objPre, originalWidth, originalHeight){
    var zoomParam = clacImgZoomParam( 300, 300, originalWidth,originalHeight);
    objPre.style.width = zoomParam.width +'px';
    objPre.style.height = zoomParam.height +'px';
    objPre.style.marginTop = zoomParam.top +'px';
    objPre.style.marginLeft = zoomParam.left + 'px';
    }
    function clacImgZoomParam( maxWidth, maxHeight, width, height ){
    var param = { width:width, height:height, top:0, left:0 };
    if(width>maxWidth || height>maxHeight ){
      rateWidth = width /maxWidth;
      rateHeight = height /maxHeight;  
      if( rateWidth > rateHeight){
      param.width =maxWidth;
      param.height = height /rateWidth;
      }else{
      param.width = width /rateHeight;
      param.height =maxHeight;
      }
    }param.left = (maxWidth - param.width) / 2;
    param.top = (maxHeight - param.height) /2;
    return param;
    }
    </script>
    </head>
    <body>
    <div id="preview_wrapper">
      <div id="preview_fake">
      <img id="preview" onload="onPreviewLoad(this)"/>
      </div>
    </div>
    <br/>
    <input id="upload_img" type="file" onchange="onUploadImgChange(this)"/>
    <br/>
    <img id="preview_size_fake"/>
    </body>
    </html>
      

  4.   

    http://www.360doc.com/content/09/0519/15/74246_3564790.shtml