分享一個圖片管理程式,圖片批量上傳,圖片管理(有圖片)
阿新 • • 發佈:2018-12-30
呵呵,好久沒寫部落格了。今天在此奉上一篇!
關於圖片管理,其實做專案很多地方都用到圖片管理。
比如:產品圖片,新聞圖片,作品圖片。
現分享一篇關於圖片管理的文章,希望大家能用得上。
先來看效果圖吧:
上傳頁面
上傳頁面2
圖片選擇頁面。
主要功能:
1.圖片批量上傳。
1)上傳後將按比率生成一張小圖。
2)若存在同名檔案則加上(n)。
2.建立/刪除資料夾。資料夾名稱過濾。
3.圖片刪除,同時刪除小圖和大圖。
4.雙擊資料夾可進入資料夾,並顯示裡面的圖片
5.獲取圖片,如果存在小圖片則顯示小圖片,沒有則顯示大圖
1)上傳頁面不顯示選擇按鈕
2)圖片選擇頁面才顯示圖片(action=getfile時顯示選擇按鈕)
3)有小圖時顯示選擇小圖按鈕,否則只顯示選擇原圖按鈕
大體思路是swfupload上傳圖片後執行getFiles函式獲取圖片和資料夾
注意事件:請給上傳資料夾許可權。用到專案中時,請判斷使用者的許可權,否則相當於裸奔。 over!
關於圖片管理,其實做專案很多地方都用到圖片管理。
比如:產品圖片,新聞圖片,作品圖片。
現分享一篇關於圖片管理的文章,希望大家能用得上。
先來看效果圖吧:
上傳頁面
上傳頁面2
圖片選擇頁面。
主要功能:
1.圖片批量上傳。
1)上傳後將按比率生成一張小圖。
2)若存在同名檔案則加上(n)。
2.建立/刪除資料夾。資料夾名稱過濾。
3.圖片刪除,同時刪除小圖和大圖。
4.雙擊資料夾可進入資料夾,並顯示裡面的圖片
5.獲取圖片,如果存在小圖片則顯示小圖片,沒有則顯示大圖
1)上傳頁面不顯示選擇按鈕
2)圖片選擇頁面才顯示圖片(action=getfile時顯示選擇按鈕)
3)有小圖時顯示選擇小圖按鈕,否則只顯示選擇原圖按鈕
js部分原始碼:
本程式用的是flash上傳——swfupload。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")); } } }); }
大體思路是swfupload上傳圖片後執行getFiles函式獲取圖片和資料夾
返回圖片後如果url存在引數action=getfile則顯示選擇按鈕。如果hasThumb===“true”則顯示選擇小圖按鈕。
伺服器端程式碼就不貼出來了。需要原始碼的朋友可加入qq群:63181865獲取。歡迎加入一起學習!注意事件:請給上傳資料夾許可權。用到專案中時,請判斷使用者的許可權,否則相當於裸奔。 over!