java+js實現(xiàn)展示本地文件夾下的所有圖片demo

1、java+js實現(xiàn)展本地件夾下的所有圖demojava+js實現(xiàn)展本地件夾下的所有圖demo最近項遇到需要實現(xiàn)前端通過個按鈕點擊事件， 彈窗瀏覽本地件夾下的所有圖： 思路:獲取到所需展圖的本地件夾內(nèi)所有圖的件絕對路徑名稱（ 路徑+圖名稱.格式名稱）由于圖過， 對圖進(jìn)按例壓縮再展在前端展圖第步： 獲取本地件夾中的所有圖路徑package mon; import java.io.File;import java.io.IOException;import .MalformedURLException; import java.util.ArrayList;import javax.servlet.

2、ServletException;import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody;/*件預(yù)覽輔助類author lhb*

3、/ Controllerpublic class FileBrowseUtil /*通過ajax請求獲取傳的件路徑邊的件fileList數(shù)組param reqparam respparam params 件夾路徑參數(shù)returnthrows ServletExceptionthrows IOExceptionthrows MalformedURLException*/ RequestMapping(/getFileList.do) ResponseBodyprotected ArrayList CalculateGeoServlet(HttpServletRequest req, HttpSe

4、rvletResponse resp,String params) throws ServletException, IOException, MalformedURLException ArrayList fileList=new ArrayList(); fileList=getFiles(params);return fileList;/*通過遞歸得到某路徑下所有的錄及其件param filePath 件路徑return*/public static ArrayList getFiles(String filePath) ArrayList fileList = new ArrayLis

5、t(); File root = new File(filePath);File files = root.listFiles(); for (File file : files) if (file.isDirectory() /* 遞歸調(diào)*/ getFiles(file.getAbsolutePath();fileList.add(file.getAbsolutePath(); else String picPathStr = file.getAbsolutePath();/String picPathStr = file.getAbsolutePath().replaceAll(,/);

6、fileList.add(picPathStr);/*for(String str:fileList) System.out.println(str);*/return fileList;可以先調(diào)測試輸出結(jié)果如圖String filePath = “C:/Users/giscafer/Pictures/”; getFiles(filePath )第步 前端ajax調(diào)請求獲取圖路徑數(shù)組/*獲取圖件數(shù)組*/function common_getPicFileList() var params = C:/Users/giscafer/Pictures/;$.ajax(/ft處使的是封裝的JAVA類

7、url: Config.hostUrl + /getFileList.do, type: POST,data: params: params,/圖件夾路徑作為參數(shù)傳java類success: function (data) if (!data.length) alert(您還沒有截圖，法查看圖！); return; else /獲取到的圖數(shù)組處理邏輯法loadPicFormDB(data);,error: function (e) console.log(e);console.log(獲取件list數(shù)組失敗，請檢查接服務(wù)););結(jié)束以上兩個步驟就可以完成瀏覽本地圖的法了。剩下的就是loadPi

8、cFormDB(data);法，這個根據(jù)你們需要進(jìn)展，上也有很多 相冊類型的現(xiàn)成的代碼，直接拿來改掉圖地址即可；/*加載圖，將圖拼成html代碼param SJ_CODE 事件編號*/function loadPicFormDB(data) var pichtml = ;for (var i = 0; i data.length; i+) var src =datai;var html1 = + + datai + ;pichtml += html1;/scrollPic();showPicDetail(pichtml);/展圖（ft代碼省略,直接給個div或者彈窗就可以了）上邊使到的Auto

9、ResizeImage法是個圖壓縮法，壓縮原理：按傳的maxWidth和maxHeight的進(jìn)圖壓縮按例縮圖param maxWidthparam maxHeightparam objImgconstructor*/function AutoResizeImage(maxWidth, maxHeight, objImg) var img = new Image();img.src = objImg.src; var hRatio;var wRatio; var Ratio = 1;var w = img.width; var h = img.height;wRatio = maxWidth / w; hRatio = maxHeight / h;if (maxWidth = 0 & maxHeight = 0) Ratio = 1; else if (maxWidth = 0) / if (hRatio 1)Ratio = hRatio; else if (maxHeight = 0) if (wRatio 1)Ratio = wRatio; e