jsp图片预览

ydcsh 2010-09-27 03:41:35

在做一个图片上传的功能，但是需要预览该图片，

在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>

这样的代码就别贴给我了谢谢

--------------------------------------------------------------------

...全文

391 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

andesen 2010-09-28

打赏
举报

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

andesen 2010-09-28

打赏
举报

IE8 要更改浏览器设置

ydcsh 2010-09-27

打赏
举报

补充一下：是在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>

martindoctor 2010-09-27

打赏
举报

试试下面的方法，肯定可以，我项目中就是用这个showOriginalPhoto（）方法调原图的
<img id="photo" src="trademark/check/ShowPic?table=trademark&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+"'>");
}