分享一个图片管理程序,图片批量上传,图片管理(有图片)

呵呵，好久没写博客了。今天在此奉上一篇！

关于图片管理，其实做项目很多地方都用到图片管理。

比如：产品图片，新闻图片，作品图片。

现分享一篇关于图片管理的文章，希望大家能用得上。

先来看效果图吧：



上传页面



上传页面2



图片选择页面。

主要功能：

1.图片批量上传。

1)上传后将按比率生成一张小图。

2)若存在同名文件则加上(n)。

2.创建/删除文件夹。文件夹名称过滤。

3.图片删除，同时删除小图和大图。

4.双击文件夹可进入文件夹，并显示里面的图片

5.获取图片，如果存在小图片则显示小图片，没有则显示大图

1)上传页面不显示选择按钮

2)图片选择页面才显示图片(action=getfile时显示选择按钮)

3)有小图时显示选择小图按钮，否则只显示选择原图按钮

js部分源码：

var s = window.location.search.toLowerCase();
//页面加载事件
$(function() {
getFilers("/uploadfile/");
});

//文件夹双击事件
function liDblclick(_this) {
$("#hffilepath").val($(_this).attr("title"));
$("#currentfolder").html("当前路径：" + $(_this).attr("title"));
getFilers($(_this).attr("title"));
}

//选择图片事件
function selectFile(_this, isBig) {
var img = $(_this).parent().parent().find("img");
if (isBig) {
window.returnValue = img.attr("title");
window.close();
}
else {
window.returnValue = img.attr("src");
window.close();
}
}

//删除文件夹
function delFolder(_this) {
if (confirm("该操作将删除该文件夹和文件夹下的所有文件。\r\n您确定要删除该文件夹吗？")) {
$this = $(_this).parent().parent();
var img = $this.find("img").eq(0);
$.ajax({
url: "/upload/swfupload.aspx",
dataType: "json",
data: { action: "deletefolder", "filepath": $this.attr("title"), r: Math.random() },
error: function(msg) {
alert("请求服务器发生错误！");
},
success: function(data) {
if (data.result.statu === "ok") {
$this.remove();
}
}
});
}
}

//绑定li的hover事件和显示删除按钮
function bindEvent(imglist) {
//alert(imglist.html());
imglist.find("li").hover(function() {
$(this).addClass("hover");
$(this).find("div.too").show();
}, function() {
$(this).removeClass("hover");
$(this).find("div.too").hide();
});
}

//删除文件事件
function delFile(_this) {
var $li = $(_this).parent().parent();
if (confirm("您确定要删除吗？")) {
var img = $li.find("img").eq(0);
$.ajax({
url: "/upload/swfupload.aspx",
dataType: 'json',
data: { action: "delete", imgurl: img.attr("src"), "r": Math.random() },
error: function(msg) {
alert("请求服务器发生错误！");
},
success: function(data) {
if (data.result.statu === "ok") {
$li.remove();
}
else {
alert(data.result.msg);
}
}
});
}
}

//获取文件
function getFilers(filepath) {
$.ajax({
url: "/upload/swfupload.aspx",
dataType: 'json',
data: { action: "getfile", "filepath": filepath, r: Math.random() },
error: function(msg) {
alert("请求服务器发生错误！");
},
success: function(data) {
if (data.result.statu === "ok") {
var count = filepath.substring(0, filepath.length - 1).lastIndexOf("/");
var root = count > 0 ? filepath.substring(0, count + 1) : "/uploadfile/";
var t = "<li class=\"folder\" ondblclick=\"javascript:liDblclick(this);\" title=\"" + root + "\"><a href=\"javascript:void(0);\">"
+ "<img align=\"middle\" src=\"/images/system/folder.big.gif\" /><br/>"
+ "<span>向上</span></a></li>";
for (var i in data.folders) {
t += " <li class=\"folder\" ondblclick=\"javascript:liDblclick(this);\" title=\"" + data.folders[i].path + "\"><a class=\"ai\" href=\"javascript:void(0);\">"
+ "<img src=\"/images/system/folder.big.gif\" /><br />"
+ "<span>" + data.folders[i].name + "</span> </a>"
+ "<div class=\"too\">"
+ "<a onclick=\"javascript:delFolder(this);\" class=\"del\" href=\"javascript:void(0)\" title=\"删除\">删除</a></div>"
+ "</li>";
}
for (var i in data.files) {
t += "<li class=\"filer\"><a class=\"ai\" href=\"javascript:void(0);\">"
+ "<img title=\"" + data.files[i].thumb.replace("/small/", "/") + "\" src=\"" + data.files[i].thumb + "\"/><br />"
+ "<span>" + data.files[i].fileName + "</span></a>"
+ "<div class=\"too\">";
if (s.length > 0) {
if (s.indexOf("action=getfile") > 0) {
t += "<a onclick=\"javascript:selectFile(this,true);\" class=\"sel\" href=\"javascript:void(0)\" title=\"选择原图\">原图</a>";
if (data.files[i].hasThumb === "true") {
t += "<a onclick=\"javascript:selectFile(this,false);\" class=\"sel1\" href=\"javascript:void(0)\" title=\"选择小图\">小图</a>";
}
}
}
t += "<a onclick=\"javascript:delFile(this);\" class=\"del\" href=\"javascript:void(0)\" title=\"删除\">删除</a></div>"
+ "</li>";
}
$("#imglist").html(t)
bindEvent($("#imglist"));
}
}
});
}

本程序用的是flash上传——swfupload。

大体思路是swfupload上传图片后执行getFiles函数获取图片和文件夹

返回图片后如果url存在参数action=getfile则显示选择按钮。如果hasThumb===“true”则显示选择小图按钮。

服务器端代码就不贴出来了。需要源代码的朋友可加入qq群：63181865获取。欢迎加入一起学习！

注意事件：请给上传文件夹权限。用到项目中时，请判断用户的权限，否则相当于裸奔。
over!