本文介绍了一种模仿QQ相册中图片模糊加载到清晰显示的技术实现方式，通过使用缩略图和完整图片的加载过程，实现了从模糊到清晰的过渡效果。
仿QQ相册模糊到清晰
原理
参考了叶小钗的博客:http://www.cnblogs.com/yexiaochai/p/3151662.html
其实可以理解为:两张图片起位置一样,一张用100X75的缩略图显示在670X502的图片上, 肯定会显示的模糊
在这个图片的旁边还有一个图片是完整图片,因为是浮动的在缩略图上面的,所以完整图片的加载从上而下时 就会形成由模糊到清晰的效果
实例:
项目结构:
index.htm 主要显示页面
ImageUpload.aspx 图片上传页面
Handler/ImageHandler.ashx 获取图片 li 列表
ImageSL 存放缩略图片
ImageWZ 存放完整图片
样式:
样式这里就不介绍了,大家应该都可以看懂 PS 此处直接引用QQ相册的样式,如果你不能访问外网 可能有些图片
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, input, button, textarea, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video{ margin: 0;
padding: 0;}
.photo_thumbnailist_detail{ height: 60px;
overflow: hidden;
position: relative;
width: 828px;}
.photo_v3{padding: 20px;}
.page_single{padding-bottom: 40px;}
.clear:before, .clear:after{content: "";
display: table;}
.clear:after{clear: both;}
.page_single .photo_thumbnailist{width: 842px;}
.photo_thumbnailist{margin: 0 auto 15px;
padding-left: 24px;
position: relative;}
.page_single .photo_layout{width: 870px;}
.photo_layout{margin: 0 auto;}
a:link, a:visited{text-decoration: none;}
.photo_thumbnailist_left_current{background-image:url("http://cnc.qzonestyle.gtimg.cn/qzone_v6/sprite/photo_v3.png?max_age=19830211&d=20130613144752");background-position: -247px 0;}
.photo_thumbnailist_right_current{background-image:url("http://cnc.qzonestyle.gtimg.cn/qzone_v6/sprite/photo_v3.png?max_age=19830211&d=20130613144752");background-position: -277px 0;}
.photo_thumbnailist li{float: left;
margin: 0 11px 10px 0;
overflow: hidden;
vertical-align: top;}
li{list-style: none outside none;}
.photo_thumbnailist li a, .photo_thumbnailist li a.photo_thumbnailist_current{border-style: solid;
border-width: 1px;
display: block;
font-size: 0;
height: 52px;
line-height: 0;
margin: 1px;
overflow: hidden;
padding: 1px;
width: 52px;}
a, .c_tx {color: #915833;}
.photo_thumbnailist_mask{display: block;
height: 52px;
overflow: hidden;
width: 52px;}
.photo_thumbnailist_container{display: table-cell;
height: 52px;
overflow: hidden;
text-align: center;
vertical-align: middle;
width: 52px;}
.page_single .photo_layout_section{width: 670px;}
.photo_layout_section{float: left;
width: 100%;}
.photo_single{margin-bottom: 20px;
position: relative;
z-index: 10;}
.left-img{cursor:url("http://cnc.qzs.qq.com/qzone/client/photo/cursor/pre.cur?max_age=20111010"), auto}
.page_single .photo_single_img{height: 300px;
width: 670px;}
.right-img{cursor:url("http://cnc.qzs.qq.com/qzone/client/photo/cursor/next.cur?max_age=20111010"), auto}
.bg3, .bgr3, .bg3_hover:hover{background-color: #FEFDF9;}
.bor3, .bgr3, .tbor3, .bbor3, .lbor3, .rbor3{border-color: #ECDEB8;}
.photo_single_img{overflow: hidden;
text-align: center;
vertical-align: middle;}
.bor, .bgr, .bgr2, .bgr3, .bor2, .bor3, .bor4, .bor5{border-style: solid;}
.bor, .tbor, .bbor, .lbor, .rbor, .bor2, .tbor2, .bbor2, .lbor2, .rbor2, .bgr, .bgr2, .bgr3, .bor3, .lbor3, .rbor3, .bbor3, .tbor3, .bor4, .lbor4, .rbor4, .bbor4, .tbor4, .bor5, .lbor5, .rbor5, .bbor5, .tbor5{border-width: 1px;}
.photo_thumbnailist_left, .photo_thumbnailist_right, .photo_thumbnailist_left_current, .photo_thumbnailist_right_current{font-size: 0;
height: 38px;
line-height: 100px;
overflow: hidden;
position: absolute;
top: 10px;
width: 14px;}
.photo_thumbnailist_right, .photo_thumbnailist_right_current{right: 0;}
.photo_thumbnailist_left, .photo_thumbnailist_left_current{left: 0;}
.photo_thumbnailist_detail ul{left: 0;
overflow: hidden;
position: absolute;
top: 0;}
.photo_thumbnailist_right{background-image:url("http://cnc.qzonestyle.gtimg.cn/qzone_v6/sprite/photo_v3.png?max_age=19830211&d=20130613144752");background-position:-262px 0;}
.photo_thumbnailist_left{background-image:url("http://cnc.qzonestyle.gtimg.cn/qzone_v6/sprite/photo_v3.png?max_age=19830211&d=20130613144752");background-position:-232px 0;}
.photo_thumbnailist li a:hover{ border-width:2px; margin:0px;}
.photo_v3 .highlight{border-color: #FFB424;border-width:2px;margin:0px;}JavaScript
var index = 0; //索引
var islock = false; //锁对象
//移动绑定事件
function _ul_li_mover() {
$("#pre_view_loop ul li").unbind("click"); //清空事件
$("#pre_view_loop ul li").eq(index).click(function () { $("#photo_list_prev").click(); }); //第一个翻页事件
$("#pre_view_loop ul li").eq(index + 11).click(function () { $("#photo_list_next").click(); }); //最后一个翻页事件
$("#pre_view_loop ul li").click(function () { //绑定单击事件
var img = $(this).attr("photo_list_item"); //获取上传图片名称
$("#Img17").attr("src", "ImageSL/" + img); //第一次绑定地址 这里要说明一下:第一次绑定是清除上次浏览器对img上次图片的记忆,告诉浏览器开始加载新的图片
$("#Img17").attr("src", ""); //清空地址 这里的清空主要是因为 Img17 的position: absolute;会遮盖下面的层的显示
$("#_il_img_0_3").attr("src", "ImageSL/" + img); //开始加载缩略图
$("#pre_view_loop ul li a").removeClass("highlight"); //清空选中样式
$(this).find("a").addClass("highlight"); //添加选中样式
$("#Img17").attr("src", "ImageWZ/" + img); //开始加载完整图片
});
}
//点击事件(基本与上面一直)
function _ul_li_click(a) { //a 当前是索引=>index
var img = $("#pre_view_loop ul li").eq(a).attr("photo_list_item");
$("#Img17").attr("src", "ImageSL/" + img);
$("#Img17").attr("src", "");
$("#_il_img_0_3").attr("src", "ImageSL/" + img);
$("#pre_view_loop ul li a").removeClass("highlight");
$("#pre_view_loop ul li").eq(a).find("a").addClass("highlight");
$("#Img17").attr("src", "ImageWZ/" + img);
}
//绑定上传的文件列表(这里是为了模拟QQ相册的需要,当然你也可以存在数据库中)
function _ul_li_bind() {
$.ajax({
url: "Handler/ImageHandler.ashx", //地址
data: "cmd=_ul_li_ImagesSL&time=" + new Date().getTime(), //参数
cache: false, //不缓存
asyac: false, //同步
dataType: "html", //类型
success: function (html) {
$("#pre_view_loop ul").html(html); //加载li
_ul_li_mover(); //初始化事件
}
});
}
$(document).ready(function () {
_ul_li_bind(); //绑定数据
$("#photo_list_prev").click(function () {
if (!islock) { //上次执行是否已经完成
islock = true; //标示:开始执行
if (parseFloat($("#pre_view_loop ul").css("left").split('px')[0]) < 0) { //ul left如果小于0 说明可以向前移动(这里的判断有点麻烦 其实可以更简单的 直接判断index)
var _left = parseFloat($("#pre_view_loop ul").css("left").split('px')[0]) + 69; //获取向前移动后的left值
$("#pre_view_loop ul").animate({ left: _left + "" }, "fast", function () { islock = false; }); //开始移动 这里调用animate的回调函数 islock = false; 标示:执行已完成
$("#photo_list_next").css("display", "block"); //显示向下翻页
$("#photo_list_next_disabled").css("display", "none"); //隐藏最后一页
if (parseFloat($("#pre_view_loop ul").css("left").split('px')[0]) >= -69) { //判断如果是第一页(每次移动 69px) 隐藏向上翻页,显示第一页
$("#photo_list_prev").css("display", "none");
$("#photo_list_prev_disabled").css("display", "block");
}
} else {
$("#photo_list_prev").css("display", "none");
$("#photo_list_prev_disabled").css("display", "block");
islock = false;
}
if (index > 0) {
index = index - 1; //递减索引(大于0时)
}
_ul_li_mover(); //绑定事件
}
});
$("#photo_list_next").click(function () {
if (!islock) { //上次执行是否已经完成
islock = true; //同上
if ((($("#pre_view_loop ul li").length - 12) * 69) > Math.abs(parseFloat($("#pre_view_loop ul").css("left").split('px')[0]))) { //这里判断也有点繁琐(可以直接用index) 每页显示12条数据所以前面要减去12每条数据占69px
var _left = parseFloat($("#pre_view_loop ul").css("left").split('px')[0]) - 69; //同上
$("#pre_view_loop ul").animate({ left: _left + "" }, "fast", function () { islock = false; }); //同上
$("#photo_list_prev").css("display", "block"); //同上
$("#photo_list_prev_disabled").css("display", "none"); //同上
if ((($("#pre_view_loop ul li").length - 13) * 69) <= Math.abs(parseFloat($("#pre_view_loop ul").css("left").split('px')[0]))) { //最后一页是显示最后一页 隐藏下一页
$("#photo_list_next").css("display", "none");
$("#photo_list_next_disabled").css("display", "block");
}
} else {
$("#photo_list_next").css("display", "none");
$("#photo_list_next_disabled").css("display", "block");
islock = false;
}
if (index < ($("#pre_view_loop ul li").length - 1)) { //递加索引(小于li总数)
index = index + 1;
}
if (index == ($("#pre_view_loop ul li").length - 11)) { //最后一页时index-1
index = index - 1;
}
_ul_li_mover(); //同上
}
});
//切换不同的方向
$("#photo_container").mousemove(function (e) {
if ((e.clientX - $(this).offset().left) > 335) { //鼠标在图片的右边时 显示下一页信息
$("#photo_container").removeClass("left-img"); //删除左鼠标样式
$("#photo_container").addClass("right-img"); //添加右鼠标样式
$("#photo_container").attr("title", "点击跳到下一张"); //添加title
$("#photo_container img:visible").removeClass("left-img"); //删除左鼠标样式
$("#photo_container img:visible").addClass("right-img"); //添加右鼠标样式
$("#photo_container img:visible").attr("title", "点击跳到下一张"); //添加title
} else { //鼠标在图片的左边时 显示下一页信息
$("#photo_container").removeClass("right-img"); //删除右鼠标样式
$("#photo_container").addClass("left-img"); //添加左鼠标样式
$("#photo_container").attr("title", "点击跳到上一张"); //添加title
$("#photo_container img:visible").removeClass("right-img"); //删除右鼠标样式
$("#photo_container img:visible").addClass("left-img"); //添加左鼠标样式
$("#photo_container img:visible").attr("title", "点击跳到上一张"); //添加title
}
});
//绑定图片鼠标点击事件
$("#photo_container").mouseup(function (e) {
if ((e.clientX - $(this).offset().left) > 335) { //鼠标在图片右边时
if (index < $("#pre_view_loop ul li").length) { //小于li总数时
$("#photo_list_next").click(); //向下翻一页
_ul_li_click(index); //显示下一个图片
}
} else { //鼠标在图片左边时
if (index > 0) { //index大于0时
$("#photo_list_prev").click(); //向上翻一页
_ul_li_click(index); //显示上一个图片
}
}
});
});HTML
<!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" lang="en">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<title></title>
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<meta name="author" content=""/>
<meta name="viewport" content="width=device-width;initial-scale=1.0"/>
<!-- Ajax JS -->
<!-- <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" type="text/javascript"></script> -->
<!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> -->
<script> !window.jQuery && document.write("<script src='Scripts/jquery-1.4.1.min.js'>" + "</" + "script>")</script>
</head>
<body>
<div id="app_mod" class="photo_v3 page_single">
<div id="pre_view_loop" class="clear photo_thumbnailist">
<div class="photo_thumbnailist_detail">
<!-- 这里是测试数据 可以删除 -->
<ul style="left:0px">
<li id="ls_1372054281206_0" style="" photo_list_item="Chrysanthemum.jpg" index_number="0">
<a class="highlight" href="javascript:void(0);">
<span class="photo_thumbnailist_mask">
<span class="photo_thumbnailist_container">
<img src="ImageSL/Chrysanthemum.jpg" class="statistic_preview" middle="0" style="visibility: visible; width: 69.3333px; height: 52px; margin-right: -8px; margin-left: -8px;" id="img_1372054281206_0">
</span>
</span>
</a>
</li>
<li id="ls_1372054281206_1" style="" photo_list_item="Desert.jpg" index_number="1">
<a class="" href="javascript:void(0);">
<span class="photo_thumbnailist_mask">
<span class="photo_thumbnailist_container">
<img src="ImageSL/Desert.jpg" class="statistic_preview" middle="0" style="visibility: visible; width: 69.3333px; height: 52px; margin-right: -8px; margin-left: -8px;" id="img_1372054281206_1">
</span>
</span>
</a>
</li>
<li id="ls_1372054281206_2" style="" photo_list_item="g6.jpg" index_number="2">
<a class="" href="javascript:void(0);">
<span class="photo_thumbnailist_mask">
<span class="photo_thumbnailist_container">
<img src="ImageSL/g6.jpg" class="statistic_preview" middle="0" style="visibility: visible; width: 69.3333px; height: 52px; margin-right: -8px; margin-left: -8px;" id="img_1372054281206_2">
</span>
</span>
</a>
</li>
<li id="ls_1372054281206_3" style="" photo_list_item="Hydrangeas.jpg" index_number="3">
<a class="" href="javascript:void(0);">
<span class="photo_thumbnailist_mask">
<span class="photo_thumbnailist_container">
<img src="ImageSL/Hydrangeas.jpg" class="statistic_preview" middle="0" style="visibility: visible; width: 69.3333px; height: 52px; margin-right: -8px; margin-left: -8px;" id="img_1372054281206_3">
</span>
</span>
</a>
</li>
<li id="ls_1372054281206_4" style="" photo_list_item="Jellyfish.jpg" index_number="4">
<a class="" href="javascript:void(0);">
<span class="photo_thumbnailist_mask">
<span class="photo_thumbnailist_container">
<img src="ImageSL/Jellyfish.jpg" class="statistic_preview" middle="0" style="visibility: visible; width: 69.3333px; height: 52px; margin-right: -8px; margin-left: -8px;" id="img_1372054281206_4">
</span>
</span>
</a>
</li>
<li id="ls_1372054281206_5" style="" photo_list_item="Koala.jpg" index_number="5">
<a class="" href="javascript:void(0);">
<span class="photo_thumbnailist_mask">
<span class="photo_thumbnailist_container">
<img src="ImageSL/Koala.jpg" class="statistic_preview" middle="0" style="visibility: visible; width: 69.3333px; height: 52px; margin-right: -8px; margin-left: -8px;" id="img_1372054281206_5">
</span>
</span>
</a>
</li>
<li id="ls_1372054281206_6" style="" photo_list_item="Lighthouse.jpg" index_number="6">
<a class="" href="javascript:void(0);">
<span class="photo_thumbnailist_mask">
<span class="photo_thumbnailist_container">
<img src="ImageSL/Lighthouse.jpg" class="statistic_preview" middle="0" style="visibility: visible; width: 69.3333px; height: 52px; margin-right: -8px; margin-left: -8px;" id="img_1372054281206_6">
</span>
</span>
</a>
</li>
<li id="ls_1372054281206_7" style="" photo_list_item="Penguins.jpg" index_number="7">
<a class="" href="javascript:void(0);">
<span class="photo_thumbnailist_mask">
<span class="photo_thumbnailist_container">
<img src="ImageSL/Penguins.jpg" class="statistic_preview" middle="0" style="visibility: visible; width: 69.3333px; height: 52px; margin-right: -8px; margin-left: -8px;" id="img_1372054281206_7">
</span>
</span>
</a>
</li>
<li id="ls_1372054281206_8" style="" photo_list_item="Tulips.jpg" index_number="8">
<a class="" href="javascript:void(0);">
<span class="photo_thumbnailist_mask">
<span class="photo_thumbnailist_container">
<img src="ImageSL/Tulips.jpg" class="statistic_preview" middle="0" style="visibility: visible; width: 69.3333px; height: 52px; margin-right: -8px; margin-left: -8px;" id="img_1372054281206_8">
</span>
</span>
</a>
</li>
<li id="ls_1372054281206_9" style="" photo_list_item="调整大小 HCBJ_00204.jpg" index_number="9">
<a class="" href="javascript:void(0);">
<span class="photo_thumbnailist_mask">
<span class="photo_thumbnailist_container">
<img src="ImageSL/调整大小 HCBJ_00204.jpg" class="statistic_preview" middle="0" style="visibility: visible; width: 69.3333px; height: 52px; margin-right: -8px; margin-left: -8px;" id="img_1372054281206_9">
</span>
</span>
</a>
</li>
<li id="ls_1372054281206_10" style="" photo_list_item="调整大小 HCBJ_00212.jpg" index_number="10">
<a class="" href="javascript:void(0);">
<span class="photo_thumbnailist_mask">
<span class="photo_thumbnailist_container">
<img src="ImageSL/调整大小 HCBJ_00212.jpg" class="statistic_preview" middle="0" style="visibility: visible; width: 69.3333px; height: 52px; margin-right: -8px; margin-left: -8px;" id="img_1372054281206_10">
</span>
</span>
</a>
</li>
<li id="ls_1372054281206_11" style="" photo_list_item="调整大小 HCBJ_00213.jpg" index_number="11">
<a class="" href="javascript:void(0);">
<span class="photo_thumbnailist_mask">
<span class="photo_thumbnailist_container">
<img src="ImageSL/调整大小 HCBJ_00213.jpg" class="statistic_preview" middle="0" style="visibility: visible; width: 69.3333px; height: 52px; margin-right: -8px; margin-left: -8px;" id="img_1372054281206_11">
</span>
</span>
</a>
</li>
<li id="ls_1372054281206_12" style="" photo_list_item="调整大小 HCBJ_00214.jpg" index_number="12">
<a class="" href="javascript:void(0);">
<span class="photo_thumbnailist_mask">
<span class="photo_thumbnailist_container">
<img src="ImageSL/调整大小 HCBJ_00214.jpg" class="statistic_preview" middle="0" style="visibility: visible; width: 69.3333px; height: 52px; margin-right: -8px; margin-left: -8px;" id="img_1372054281206_12">
</span>
</span>
</a>
</li>
<li id="ls_1372054281206_13" style="" photo_list_item="调整大小 HCBJ_00401.jpg" index_number="13">
<a class="" href="javascript:void(0);">
<span class="photo_thumbnailist_mask">
<span class="photo_thumbnailist_container">
<img src="ImageSL/调整大小 HCBJ_00401.jpg" class="statistic_preview" middle="0" style="visibility: visible; width: 69.3333px; height: 52px; margin-right: -8px; margin-left: -8px;" id="img_1372054281206_13">
</span>
</span>
</a>
</li>
<li id="ls_1372054281206_14" style="" photo_list_item="调整大小 HCBJ_00405.jpg" index_number="14">
<a class="" href="javascript:void(0);">
<span class="photo_thumbnailist_mask">
<span class="photo_thumbnailist_container">
<img src="ImageSL/调整大小 HCBJ_00405.jpg" class="statistic_preview" middle="0" style="visibility: visible; width: 69.3333px; height: 52px; margin-right: -8px; margin-left: -8px;" id="img_1372054281206_14">
</span>
</span>
</a>
</li>
<li id="ls_1372054281206_15" style="" photo_list_item="调整大小 HCBJ_00407.jpg" index_number="15">
<a class="" href="javascript:void(0);">
<span class="photo_thumbnailist_mask">
<span class="photo_thumbnailist_container">
<img src="ImageSL/调整大小 HCBJ_00407.jpg" class="statistic_preview" middle="0" style="visibility: visible; width: 69.3333px; height: 52px; margin-right: -8px; margin-left: -8px;" id="img_1372054281206_15">
</span>
</span>
</a>
</li>
<li id="ls_1372054281206_16" style="" photo_list_item="调整大小 HCBJ_00414.jpg" index_number="16">
<a class="" href="javascript:void(0);">
<span class="photo_thumbnailist_mask">
<span class="photo_thumbnailist_container">
<img src="ImageSL/调整大小 HCBJ_00414.jpg" class="statistic_preview" middle="0" style="visibility: visible; width: 69.3333px; height: 52px; margin-right: -8px; margin-left: -8px;" id="img_1372054281206_16">
</span>
</span>
</a>
</li>
<li id="ls_1372054281206_17" style="" photo_list_item="调整大小 HCBJ_00415.jpg" index_number="17">
<a class="" href="javascript:void(0);">
<span class="photo_thumbnailist_mask">
<span class="photo_thumbnailist_container">
<img src="ImageSL/调整大小 HCBJ_00415.jpg" class="statistic_preview" middle="0" style="visibility: visible; width: 69.3333px; height: 52px; margin-right: -8px; margin-left: -8px;" id="img_1372054281206_17">
</span>
</span>
</a>
</li>
<li id="ls_1372054281206_18" style="" photo_list_item="图.GIF" index_number="18">
<a class="" href="javascript:void(0);">
<span class="photo_thumbnailist_mask">
<span class="photo_thumbnailist_container">
<img src="ImageSL/图.GIF" class="statistic_preview" middle="0" style="visibility: visible; width: 69.3333px; height: 52px; margin-right: -8px; margin-left: -8px;" id="img_1372054281206_18">
</span>
</span>
</a>
</li>
</ul>
</div>
<a id="photo_list_prev" class="photo_thumbnailist_left_current" href="javascript:void(0);" title="上一页" style="display: none;">上一页</a>
<a id="photo_list_next" class="photo_thumbnailist_right_current" href="javascript:void(0);" title="下一页" style="">下一页</a>
<span id="photo_list_prev_disabled" class="photo_thumbnailist_left" style="" title="最新一页了">最新一页了</span>
<span id="photo_list_next_disabled" class="photo_thumbnailist_right" style="display: none;" title="最后一页了">最后一页了</span>
</div>
<div class="clear photo_layout">
<div class="photo_layout_section">
<div id="photo_container" class="photo_single right-img" style="width: 670px; height: 502px;" title="点击跳到下一张">
<p id="photo_view" class="bor3 bg3 photo_single_img" style="width: 670px; height: 502px;">
<img title="点击跳到上一张" src="ImageWZ/Chrysanthemum.jpg" id="Img17" alt="" style="width: 670px; height: 502px; left: 0px; top: 0px; position: absolute;" class="statistic_photoview left-img">
<img src="ImageSL/Chrysanthemum.jpg" id="_il_img_0_3" alt="" style="width: 670px; height: 502px; left: 0px; top: 0px;" class="statistic_photoview">
</p>
</div>
</div>
</div>
<p style=" margin:0 auto; width:65px;"><a href="ImageUpload.aspx">上传图片</a></p>
</div>
</body>
</html>ImageUpload.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ImageUpload.aspx.cs" Inherits="HTML5Template.WebForm1" %>
<!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>
</head>
<body>
<form id="form1" runat="server">
<div>
<p>缩略图:<br /><asp:Image ID="Image1" runat="server" Width="100" Height="75"/></p>
<p>完整图:<br /><asp:Image ID="Image2" runat="server" Width="670" Height="502"/></p>
<p><asp:FileUpload ID="FileUpload1" runat="server" /></p>
<p><asp:Button ID="Button1" runat="server" Text="上传" onclick="Button1_Click" />
<asp:Label ID="Label1" runat="server" Text="" ForeColor="Red"></asp:Label>
</p>
<p style=" margin:0 auto; width:65px;"><a href="index.htm">图片浏览</a></p>
</div>
</form>
</body>
</html>
ImageUpload.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using System.Drawing;
namespace HTML5Template
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
if (FileUpload1.FileContent.Length > 0)
{
//生成完整图片路径
string path = Server.MapPath("~/ImageWZ/" + FileUpload1.FileName);
//生成缩略图图片路径
string pathSL = Server.MapPath("~/ImageSL/" + FileUpload1.FileName);
if (!File.Exists(path)) //判断是否重复
{
FileUpload1.SaveAs(path); //上传完整图片
SetImage(path, pathSL); //在指定位置生成缩略图
Image1.ImageUrl = "~/ImageSL/" + FileUpload1.FileName; //显示
Image2.ImageUrl = "~/ImageWZ/" + FileUpload1.FileName;
Label1.Text = "上传成功!";
Label1.ForeColor = Color.Green;
}
else
{
Label1.Text = "文件已经存在!";
Label1.ForeColor = Color.Red;
}
}
}
public void SetImage(string path,string pathSL)
{
System.Drawing.Image image = System.Drawing.Image.FromFile(path); //加载完整图片
System.Drawing.Image imageSL = image.GetThumbnailImage(100, 75, null, IntPtr.Zero); //按指定大小生成缩略图
imageSL.Save(pathSL); //保存指定位置
}
}
}Handler/ImageHandler.ashx
using System;
using System.Collections.Generic;
using System.Web;
using System.Reflection;
using System.IO;
using System.Text;
namespace HTML5Template
{
/// <summary>
/// ImageHandler 的摘要说明
/// </summary>
public class ImageHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string cmd = context.Request["cmd"];
if (!string.IsNullOrEmpty(cmd))
{
MethodInfo Method = this.GetType().GetMethod(cmd, BindingFlags.NonPublic | BindingFlags.Instance);
if (Method != null)
{
Method.Invoke(this, new object[] { context });
}
}
}
public bool IsReusable
{
get
{
return false;
}
}
void _ul_li_ImagesSL(HttpContext context)
{
DirectoryInfo path = new DirectoryInfo(context.Server.MapPath("../ImageSL"));
int i = 0;
StringBuilder _ul_li_images = new StringBuilder();
foreach (FileInfo item in path.GetFiles())
{
_ul_li_images.AppendFormat("<li id=\"ls_1372054281206_{0}\" style=\"\" photo_list_item=\"{1}\" index_number=\"{0}\">",i,item.Name);
_ul_li_images.Append("<a class=\"" + (i == 0 ? "highlight" : "") + "\" href=\"javascript:void(0);\">");
_ul_li_images.Append("<span class=\"photo_thumbnailist_mask\">");
_ul_li_images.Append("<span class=\"photo_thumbnailist_container\">");
_ul_li_images.AppendFormat("<img src=\"ImageSL/{1}\" class=\"statistic_preview\" middle=\"0\" style=\"visibility: visible; width: 69.3333px; height: 52px; margin-right: -8px; margin-left: -8px;\" id=\"img_1372054281206_{0}\">", i, item.Name);
_ul_li_images.Append("</span>");
_ul_li_images.Append("</span>");
_ul_li_images.Append("</a>");
_ul_li_images.Append("</li>");
i++;
}
_ul_li_images.AppendFormat("<li id=\"ls_1372054281206_{0}\" style=\"\" photo_list_item=\"photo_back.png\" index_number=\"{0}\">", i);
_ul_li_images.Append("<a class=\"" + (i == 0 ? "highlight" : "") + "\" href=\"javascript:void(0);\">");
_ul_li_images.Append("<span class=\"photo_thumbnailist_mask\">");
_ul_li_images.Append("<span class=\"photo_thumbnailist_container\">");
_ul_li_images.AppendFormat("<img src=\"http://cnc.qzs.qq.com/ac/qzone_v5/photo/photo_back.png\" class=\"statistic_preview\" middle=\"0\" style=\"visibility: visible; width: 69.3333px; height: 52px; margin-right: -8px; margin-left: -8px;\" id=\"img_1372054281206_{0}\">", i);
_ul_li_images.Append("</span>");
_ul_li_images.Append("</span>");
_ul_li_images.Append("</a>");
_ul_li_images.Append("</li>");
context.Response.Write(_ul_li_images.ToString());
context.Response.End();
}
}
}效果
上传图片
显示数据
测试心得
如果你想测试的话 就发布到本地IIS 然后清空浏览器的缓存 限制浏览器的网速 上/下 50K/S 就可以 完整图片最好大一点 但别超过30M的巨大图片 哈哈 要不还得修改配置文件
结语
好了 今天就到这里 休息 休息一下 谢谢阅读!希望对你有所帮助 下载地址:http://download.youkuaiyun.com/detail/a66081638/5652811
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
