呵呵，好久沒寫部落格了。今天在此奉上一篇！
關於圖片管理，其實做專案很多地方都用到圖片管理。
比如：產品圖片，新聞圖片，作品圖片。
現分享一篇關於圖片管理的文章，希望大家能用得上。
先來看效果圖吧：

上傳頁面

上傳頁面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!