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

1、java+js实现展本地件夹下的所有图demojava+js实现展本地件夹下的所有图demo最近项遇到需要实现前端通过个按钮点击事件， 弹窗浏览本地件夹下的所有图： 思路:获取到所需展图的本地件夹内所有图的件绝对路径名称（ 路径+图名称.格式名称）由于图过， 对图进按例压缩再展在前端展图第步： 获取本地件夹中的所有图路径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;/*件预览辅助类author lhb*

3、/ Controllerpublic class FileBrowseUtil /*通过ajax请求获取传的件路径边的件fileList数组param reqparam respparam params 件夹路径参数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() /* 递归调*/ 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;可以先调测试输出结果如图String filePath = “C:/Users/giscafer/Pictures/”; getFiles(filePath )第步 前端ajax调请求获取图路径数组/*获取图件数组*/function common_getPicFileList() var params = C:/Users/giscafer/Pictures/;$.ajax(/ft处使的是封装的JAVA类

7、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数组失败，请检查接服务););结束以上两个步骤就可以完成浏览本地图的法了。剩下的就是loadPi

8、cFormDB(data);法，这个根据你们需要进展，上也有很多 相册类型的现成的代码，直接拿来改掉图地址即可；/*加载图，将图拼成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的进图压缩按例缩图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