java+js实现展示本地文件夹下的所有图片demo

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
*
*/
@Controller
public 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—–