java+js实现完整的图片展示本地目录demo

最近的项目满足需要，实现通过一个前端button点击事件，流行音乐浏览下的全部图片： 思路: - 获取到所需展示图片的本地目录内全部图片的文件绝对路径名称（路径+图片名称.格式名称） - 因为图片过大。对图片进行按比例压缩再展示 - 在前端展示图片 - （前端各式各样的展示……）

---

第一步：获取本地目录中的全部图片路径

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

---

版权声明：本文博主原创文章，博客，未经同意不得转载。

转载于:https://www.cnblogs.com/bhlsheji/p/4871605.html

相关资源：数据结构—成绩单生成器