单击按钮打开图片另存为对话框的示例如下:
<!
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 src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
< script language ="JavaScript" >
<!--
function downLoadImage(imagePathURL){
// 如果中间IFRAME不存在,则添加
if ( ! document.getElementById( " _SAVEASIMAGE_TEMP_FRAME " ))
jQuery(' < iframe style = " display:none; " id = " _SAVEASIMAGE_TEMP_FRAME " name = " _SAVEASIMAGE_TEMP_FRAME " onload = " _doSaveAsImage(); "
width = " 0 " height = " 0 " src = " about:blank " ></ iframe > ').appendTo( " body " );
if (document.all._SAVEASIMAGE_TEMP_FRAME.src != imagePathURL){
// 图片地址发生变化,加载图片
document.all._SAVEASIMAGE_TEMP_FRAME.src = imagePathURL;
} else {
// 图片地址没有变化,直接另存为
_doSaveAsImage();
}
}
function _doSaveAsImage(){
if (document.all._SAVEASIMAGE_TEMP_FRAME.src != " about:blank " )
document.frames( " _SAVEASIMAGE_TEMP_FRAME " ).document.execCommand( " SaveAs " );
}
// -->
</ script >
</ head >
< body >
< input type ="button" value ="download image" onclick ="downLoadImage('http://www.blogjava.net/images/blogjava_net/weiwei/46570/r_beyond1991.jpg');" >
</ body >
</ html >
< html >
< head >
< title > New Document </ title >
< meta name ="Generator" content ="EditPlus" >
< meta name ="Author" content ="" >
< meta name ="Keywords" content ="" >
< meta name ="Description" content ="" >
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
< script language ="JavaScript" >
<!--
function downLoadImage(imagePathURL){
// 如果中间IFRAME不存在,则添加
if ( ! document.getElementById( " _SAVEASIMAGE_TEMP_FRAME " ))
jQuery(' < iframe style = " display:none; " id = " _SAVEASIMAGE_TEMP_FRAME " name = " _SAVEASIMAGE_TEMP_FRAME " onload = " _doSaveAsImage(); "
width = " 0 " height = " 0 " src = " about:blank " ></ iframe > ').appendTo( " body " );
if (document.all._SAVEASIMAGE_TEMP_FRAME.src != imagePathURL){
// 图片地址发生变化,加载图片
document.all._SAVEASIMAGE_TEMP_FRAME.src = imagePathURL;
} else {
// 图片地址没有变化,直接另存为
_doSaveAsImage();
}
}
function _doSaveAsImage(){
if (document.all._SAVEASIMAGE_TEMP_FRAME.src != " about:blank " )
document.frames( " _SAVEASIMAGE_TEMP_FRAME " ).document.execCommand( " SaveAs " );
}
// -->
</ script >
</ head >
< body >
< input type ="button" value ="download image" onclick ="downLoadImage('http://www.blogjava.net/images/blogjava_net/weiwei/46570/r_beyond1991.jpg');" >
</ body >
</ html >
评论
保存代码后,要把
<input type="button" value="download image" οnclick="downLoadImage(' http://www.blogjava.net/images/logo.gif');">
中的图片地址' http://www.blogjava.net/images/logo.gif'改成你本地的地址,不然,就是跨域访问。浏览器安全性阻止这个操作。 回复 更多评论
把jquery去掉用JS直接操作dom会比较好:
<!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 language="JavaScript">
<!--
function downLoadImage(imagePathURL){
//如果中间IFRAME不存在,则添加
if(!document.getElementById("_SAVEASIMAGE_TEMP_FRAME")){
var iframe = document.createElement('iframe');
iframe.setAttribute('style','display:none;');
iframe.setAttribute('id','_SAVEASIMAGE_TEMP_FRAME');
iframe.setAttribute('name','_SAVEASIMAGE_TEMP_FRAME');
iframe.setAttribute('src','about:blank');
document.appendChild(iframe);
}
if(document.all._SAVEASIMAGE_TEMP_FRAME.src!=imagePathURL){
//图片地址发生变化,加载图片
document.all._SAVEASIMAGE_TEMP_FRAME.src = imagePathURL;
_doSaveAsImage();
}else{
//图片地址没有变化,直接另存为
_doSaveAsImage();
}
}
function _doSaveAsImage(){
if(document.all._SAVEASIMAGE_TEMP_FRAME.src!="about:blank")
document.frames("_SAVEASIMAGE_TEMP_FRAME").document.execCommand("SaveAs");
}
//-->
</script>
</head>
<body>
<input type="button" value="download image" οnclick="downLoadImage('tomcat.gif');">
</body>
</html> 回复 更多评论