圖檔下載下傳 圖檔放大

1.下載下傳：點選圖檔的下載下傳按鈕，彈出圖檔的下載下傳框，而不是打開圖檔。要相容不同浏覽器（在火狐下也是彈出下載下傳框）。

效果是滑鼠放在圖檔上，淡出一個陰影層，陰影層的右下角有個下載下傳按鈕。點選下載下傳按鈕彈出下載下傳框。

.small{   
	cursor:pointer;
}
.hidediv{
	background: url(./../img/index/bg_pic.png) repeat scroll 0 0 transparent;
	display:none;
	align:right;
	position:relative;
	height:30px;
	width:98px;
	margin-top:-30px;
	cursor:pointer;

}
.hidediv img{
	border:none;
	padding-top:5px;
	padding-right:5px;
	height:20px;
	width:20px;
}
           

<div οnmοuseοver="$('#download').show()" οnmοuseοut="$('#download').hide()" align='right'>
        <div style="width:94px;height:94px;border:1px solid #939ea9 ;padding:1px;">
                <div  style="overflow:hidden;width:94px;height:94px;"> 
                      <img class="small"  src="url"  />
                </div>
        </div> 
        <div id="download" class="hidediv">
                <img class="download" οnclick='downloadimg("url")' src="download1_unselected.png" οnmοuseοver="$(this).attr('src','download1_selected.png')" οnmοuseοut="$(this).attr('src','download1_unselected.png')"/>
        </div>
</div>
           

js下downloadimg (url)方法

function downloadimg(url){
	//alert(url);
	window.location.href="admin.php?op=download&action=download&url=" target="_blank" rel="external nofollow" +url;
}
           

在php裡收到url後進行強制下載下傳

<?php
if( isset($_REQUEST['action']) ){
    $action = $_REQUEST['action'];
}
if($action=="download"){

    if(isset($_REQUEST['url'])){ 

		$filename=$_REQUEST['url'];//擷取參數 
		
		header("Content-Type: application/force-download");
		header('Content-Disposition: attachment; filename="'.basename($filename).'"');
		readfile($filename);
		//注意：header函數前確定沒有任何輸出
		echo $img;
	
    }
}
exit;
?>
           

2.放大：點選圖檔，在網頁上層彈出圖檔的原圖，點選圖檔将會關掉。

#outerdiv{
	background: url(./../img/index/background.png) repeat scroll 0 0 transparent;
	position:fixed;
	top:0px;
	left:0px;
	overflow-y: auto;
	overflow-x: hidden;
	z-index:100;
	width:100%;
	height:100%;
	display:none;
}

.close_button{
    background: url(./../img/index/close_normal.png) no-repeat;
    position:absolute;
    z-index:102;
    top:62px;
    margin-left:-19px;
    width:36px;
    height:36px;
    border:0px;
    cursor:pointer;
}
           

#outerdiv{
	background: url(./../img/index/background.png) repeat scroll 0 0 transparent;
	position:fixed;
	top:0px;
	left:0px;
	overflow-y: auto;
	overflow-x: hidden;
	z-index:100;
	width:100%;
	height:100%;
	display:none;
}

.close_button{
    background: url(./../img/index/close_normal.png) no-repeat;
    position:absolute;
    z-index:102;
    top:62px;
    margin-left:-19px;
    width:36px;
    height:36px;
    border:0px;
    cursor:pointer;
}

$(function(){
	$(".small").click(function(){
            var _this = $(this);//将目前的img元素作為_this傳入函數
            var src = _this.attr("src");//擷取目前點選的img元素中的src屬性
            show_image(src, 'bigimg', 'outerdiv');
     });
	
});

function show_image(src,img,div){
	$("#"+img).attr('src',src);
	$("#"+div).show();
}
function close_image(img,div){
	$("#"+div).hide();
	$("#"+img).attr('src','<{$img}>/detail/pic.png');
}
function div_scroll(id){
	alert(1);
	var _div = document.getElementById(id);
	_div.onmousewheel = function(e){
	e = e || window.event;
	_div.scrollTop += e.wheelDelta>0?-100:100;
	e.returnValue=false;
 };
}
           

<div id="outerdiv" align="center" OnMouseWheel='div_scroll("outerdiv")' onClick="close_image('bigimg','outerdiv')">
          <div id="innerdiv" style="margin-top:80px;margin-bottom:30px;margin-left:auto;margin-right:auto;">
          <div style="">
                  <img id="bigimg" style="border:5px solid #fff;" src="" />
                  <button class="close_button" type="button" ></button>
          </div>
          </div>
</div>