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—–

---