java+js實現展示本地檔案夾下的所有圖片demo

標籤：javascript   java   本地圖片預覽   

java+js實現展示本地檔案夾下的所有圖片demo

最近項目遇到需要實現前端通過一個按鈕點擊事件，彈窗瀏覽本地檔案夾下的所有圖片：
思路:
- 擷取到所需展示圖片的本地檔案夾內所有圖片的檔案絕對路徑名稱（路徑+圖片名稱.格式名稱）
- 由於圖片過大，對圖片進行按比例壓縮再展示
- 在前端展示圖片
- （前端各式各樣的展示……）

第一步：擷取本地檔案夾中的所有圖片路徑

java代碼：

    package com.giscafer.common;import java.io.File;import java.io.IOException;import java.net.MalformedURLException;import java.util.ArrayList;import javax.servlet.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;/** * 檔案預覽輔助類 * @author lhb *  */@Controllerpublic class FileBrowseUtil {    /**     * 通過ajax請求擷取傳入的檔案路徑裡邊的檔案fileList數組     * @param req     * @param resp     * @param params 檔案夾路徑參數     * @return     * @throws ServletException     * @throws IOException     * @throws MalformedURLException     */    @RequestMapping("/getFileList.do")    @ResponseBody    protected ArrayList<String> CalculateGeoServlet(HttpServletRequest req,            HttpServletResponse resp,String params) throws ServletException, IOException,            MalformedURLException {        ArrayList<String> fileList=new ArrayList<String>();        fileList=getFiles(params);        return fileList;    }    /**     * 通過遞迴得到某一路徑下所有的目錄及其檔案     * @param filePath 檔案路徑     * @return     */    public static ArrayList<String> getFiles(String filePath) {        ArrayList<String> fileList = new ArrayList<String>();        File root = new File(filePath);        File[] files = root.listFiles();        for (File file : files) {            if (file.isDirectory()) {                /*                 * 遞迴調用                 */                getFiles(file.getAbsolutePath());                fileList.add(file.getAbsolutePath());            } else {                String picPathStr = file.getAbsolutePath();//              String picPathStr = file.getAbsolutePath().replaceAll("\\\\","//");                fileList.add(picPathStr);            }        }        /*for(String str:fileList){            System.out.println(str);        }*/        return fileList;    }}

可以先調用測試輸出結果

String filePath = “C://Users//giscafer//Pictures//大白”;
getFiles(filePath )

第二步 前端ajax調用請求擷取圖片路徑數組

/** *擷取圖片檔案數組 */function common_getPicFileList() {    var params = "C://Users//giscafer//Pictures//大白";    $.ajax({        //此處使用的是自己封裝的JAVA類        url: Config.hostUrl + "/getFileList.do",        type: "POST",        data: {params: params},//圖片檔案夾路徑作為參數傳入java類        success: function (data) {            if (!data.length) {                alert("您還沒有，無法查看圖片！");                return;            } else {            //擷取到的圖片數組處理邏輯方法                loadPicFormDB(data);            }        },        error: function (e) {            console.log(e);            console.log("擷取檔案list數組失敗，請檢查介面服務");        }    });}

結束以上兩個步驟就可以完成瀏覽本地圖片的方法了。剩下的就是loadPicFormDB(data);方法，這個根據你們需要進行展示，網上也有很多相簿類型的現成的代碼，直接拿來用改掉圖片地址即可；

以下是本人的

/** * 載入圖片，將圖片拼成html代碼 * @param SJ_CODE 事件編號 */function loadPicFormDB(data) {    var pichtml = "";    for (var i = 0; i < data.length; i++) {        var src =data[i];        var html1 = ‘<li><a  href="file:///‘ + src + ‘" rel="lightbox" title="‘ + data[i] + ‘" target="_blank">‘            + ‘<img onload="AutoResizeImage(800,450,this)" src="‘ + src + ‘"></a><span>‘ + data[i] + ‘</span></li>‘;        pichtml += html1;        //scrollPic();    }    ;    showPicDetail(pichtml);//展示圖片（此代碼省略,直接給個div或者彈窗就可以了）}

上邊使用到的AutoResizeImage方法是一個圖片壓縮方法，壓縮原理：
1. 按傳入的maxWidth和maxHeight的大小進行圖片壓縮

/** * 按比例縮小圖片 * @param maxWidth * @param maxHeight * @param objImg * @constructor */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;    } else if (wRatio < 1 || hRatio < 1) {        Ratio = (wRatio <= hRatio ? wRatio : hRatio);    }    if (Ratio < 1) {        w = w * Ratio;        h = h * Ratio;    }    objImg.height = h;    objImg.width = w;}

效果：

—–The End—–

java+js實現展示本地檔案夾下的所有圖片demo