java+js实现完整的图片展示本地目录demo
2015-10-12 14:35
411 查看
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—–
相关文章推荐
- Java学习总结--json
- Java基本数据类型
- 模拟Spring的简单实现
- 零成本实现接口自动化测试 – Java+TestNG 测试Restful service
- Eclipse中的Hovers 配置解析
- Java从入门到精通07-排序
- 开启Eclipse 智能感知代码功能
- Java对象克隆问题
- 动画讲解 Eclipse 常用快捷键
- ROS知识(6)----基于Eclipse开发
- 反射机制
- spring aop中的propagation的7种配置的意思
- SpringMVC 源代码深度解析<context:component-scan>(扫描和注册的注解Bean)
- Spring+SpringMVC+mybatis+easyui整合实例(二)注解方式的mybatis的使用
- BaseService.java(Service业务层基类)
- Java工作记录
- java中线程的优先级
- Spring MVC: Failed to start component [StandardEngine[Catalina].StandardHost[localhost]
- Spring+SpringMVC+mybatis+easyui整合实例(三)spring mvc整合及mybatis事务部分
- java(4)--集合类