AJAX无刷新网站图片文件预览系统
居于jquery框架的ajax无刷新网站图片预览系统，实现图片的预览
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">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
var showbo = {
cgi: 'cgi.ashx', //动态页路径，负责读取文件和目录的
idList: '#dvList', //显示目录和文件的容器ID
idLoading: '#dvLoading', //显示加载等待信息的容器ID
idImgPreview: '#imgPreview', //图片预览对象ID
loadingImgUrl: 'css/loading.gif', //加载图片时loading效果图片地址
imgMaxWidth: 450, //预览图片最大宽度
parentFolder: function (path) { return path.replace(/\/[^\/]+$/, '') },
render: function (d, path) {
var pfd = this.parentFolder(path), html = path == '' ? '----' : '<a href=\'javascript:showbo.send("' + pfd + '")\'>../返回上级目录</a>';
if (d.fds) for (var i = 0; i < d.fds.length; i++) html += '<br/><a href=\'javascript:showbo.send("' + d.fds[i] + '")\'>' + d.fds[i].replace(path, '') + '</a>';
if (d.fns) for (var i = 0; i < d.fns.length; i++) html += '<br/><a href=\'javascript:showbo.loadImage("' + d.fns[i] + '")\'>' + d.fns[i].replace(path, '') + '</a>';
$(this.idList).html(html).show();
$(this.idLoading).hide();
},
loadImage: function (url) {
$(this.idImgPreview).attr('src', this.loadingImgUrl).get(0).style.cssText = '';
if ($('#imgPreLoading').size() == 0) $('<img id="imgPreLoading" style="position:absolute;left:-99999px;top:0px;"/>').appendTo(document.body).load(function () {
$(showbo.idImgPreview).attr('src', this.src);
if (this.offsetWidth >= showbo.imgMaxWidth) $(showbo.idImgPreview).css('width', showbo.imgMaxWidth);
});
$('#imgPreLoading').attr('src',url);
},
send: function (path) {
$(this.idLoading).show();
$(this.idList).hide();
$.ajax({
url: this.cgi,
type: 'POST',
data: { p: path },
dataType: 'json',
success: function (d) {
if (d.success) showbo.render(d, path);
else alert(d.err);
},
error: function (xhr) { alert(showbo.cgi + '动态页有问题！\n状态：' + xhr.status + '\n返回内容：' + xhr.responseText); }
});
}
};
$(function () {
showbo.send('');//读取根目录
});
</script>
<title>AJAX无刷新网站图片文件预览系统</title>
<style type="text/css">
#wrapper{width:700px;margin:50px auto;zoom:1;overflow:hidden;border:solid 1px black;padding:10px;}
#nav{float:left;width:200px;border-right:dotted 1px black;}
#nav b{border-bottom:dotted 1px black;display:block;line-height:30px;}
#dvList{display:none;}
#imgPreview{float:left;margin-left:10px;}
</style>
</head><body>
居于jquery框架的ajax无刷新网站图片管理系统，实现图片的预览
<div id="wrapper">
<div id="nav">
<b>目录和文件</b>
<div id="dvList"></div>
<div id="dvLoading">正在加载数据...</div>
</div>
<img id="imgPreview" alt="选择左边导航图片进行预览"/>
</div>
</body></html>
cgi.ashx
<%@ WebHandler Language="C#" Class="cgi" %>
using System;
using System.Web;
using System.IO;
using System.Text.RegularExpressions;
public class cgi : IHttpHandler
{
private string FormatJS(string d)
{
if (string.IsNullOrEmpty(d)) return "";
return d.Replace("\n", "\\n").Replace("\r", "\\r").Replace("\"", "\\\""); ;
}
public void ProcessRequest(HttpContext context)
{
string webroot = context.Server.MapPath("/");
string path = context.Request.Form["p"], r = "", fds = "", fns = "";
if (string.IsNullOrEmpty(path)) path = webroot;//没有传递路径就默认读取根目录
else path = webroot + path.TrimStart('/').Replace("/", @"\");
Regex rx = new Regex(@"\.(jpe?g|bmp|png|gif)$", RegexOptions.IgnoreCase | RegexOptions.Compiled);
try
{
string[] arr = Directory.GetDirectories(path);
foreach (string s in arr) fds += ",\"/" + s.Replace(webroot, "").Replace(@"\", "/") + "\"";
arr = Directory.GetFiles(path);
foreach (string s in arr) if (rx.IsMatch(s)) fns += ",\"/" + s.Replace(webroot, "").Replace(@"\", "/") + "\"";
r = "{\"success\":true"
+ (fds == "" ? "" : ",\"fds\":[" + fds.Trim(',') + "]")
+ (fns == "" ? "" : ",\"fns\":[" + fns.Trim(',') + "]")
+ "}";
}
catch (Exception ex)
{
r = "{\"success\":false,\"err\":\"" + FormatJS(ex.Message) + "\"}";
}
context.Response.Write(r);
}
public bool IsReusable {
get {
return false;
}
}
}
加支付宝好友偷能量挖...
原创文章，转载请注明出处：AJAX无刷新网站图片文件预览系统