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+js实现完整的图片展示本地目录demo的更多相关文章

  1. java从网络中下载图片到本地

    public class imageDownload { public static void main(String[] args) { String url = "http://loca ...

  2. JS - 简单的下载图片至本地

    <iframe id="saveImg" src="图片路径" style="display:none;"></ifram ...

  3. openseadragon.js与deep zoom java实现艺术品图片展示

    openseadragon.js 是一款用来做图像缩放的插件,它可以用来做图片展示,做展示的插件很多,也很优秀,但大多数都解决不了图片尺寸过大的问题. 艺术品图像展示就是最简单的例子,展示此类图片一般 ...

  4. java+js实现展示本地文件夹下的所有图片demo[申明:来源于网络]

    java+js实现展示本地文件夹下的所有图片demo[申明:来源于网络] 地址:http://blog.csdn.net/allgis/article/details/46364875

  5. JS实现有点炫的图片展示效果-图片解体和组合

    经过4个月的努力学习,迎来了进入市场的最后一个学习项目.自己模仿了一个图片展示效果,用在了项目中,感觉挺炫的.在这里分享一下,希望大家喜欢~! bomb-showImg : 在线演示http://ru ...

  6. 手把手教小白如何用css+js实现页面中图片放大展示效果

    1.前言      很多童鞋会在项目中遇到一些上传图片,展示图片的操作,但是图片呢有大有小,为了页面的美观,有时候我们需要将图片展示成固定宽高度,但是呢,领导就会说,我想看大图片,怎么办?想看就看呀, ...

  7. java上传图片,把图片存到本地

    思路:js通过FileReader获取图片的Base64,Java解码用IO存到本地. HTML 代码 <input type="file" ng-model="f ...

  8. Springboot项目中 前端展示本地图片

    Springboot项目中 前端展示本地图片 本文使用的是Springboot官方推荐的thymeleaf(一种页面模板技术) 首先在pom文件加依赖 <dependency> <g ...

  9. jq图片展示插件highslide.js简单dom

    今天用用了一款图片展示插件highslide.js,感觉用起来很是舒畅,几乎不用怎么写代码,只需要知道如何写参数就行了. 那么这么牛叉的插件我们该如何用哪,下面我就跟大家讲解一下. 一.引入   首先 ...

随机推荐

  1. SQL Server,Access数据库查询易混点和C#中parameter指定参数长度的优缺点

    在学校的时候就经常做一些网站,所以这次在公司实习,组长第一次给了一个企业的网站还是很快的完成了.中间并没有遇到什么大的问题,但是还是遇到了两个新手非常容易混淆的小问题,所以拿出来跟大家分享一下. 主要 ...

  2. JavaScript语言基础知识10

    JavaScript中间if声明: <span style="font-size:18px;"><HTML> <HEAD> <TITLE& ...

  3. CentOS tripwire-文件指纹

    Tripwire是目前最为著名的unix下文件系统完整性检查的软件工具,这一软件采用的技术核心就是对每个要监控的文件产生一个数字签名,保留下来.当文件现在的数字签名与保留的数字签名不一致时,那么现在这 ...

  4. 三种方法让你的Service不被“一键加速”和系统杀掉

    基本上大家都知道提高service优先级能够在非常大程度上让你的service免于由于内存不足而被kill,当然系统仅仅是在此时先把优先级低的kill掉,假设内存还是不够,也会把你的service干掉 ...

  5. javascript---在自由落体实现

    实现一些简单的物业自由落体需要理解: clientHeight:浏览器客户机的整体高度 offsetHeight:物(实例div)高低 offsetTop:从对象client最顶层的距离 简单demo ...

  6. GRUB2配置详解:默认启动项,超时时间,隐藏引导菜单,配置文件详解,图形化配置

    配置文件详解: /etc/default/grub # 设定默认启动项,推荐使用数字 GRUB_DEFAULT=0 # 注释掉下面这行将会显示引导菜单 #GRUB_HIDDEN_TIMEOUT=0 # ...

  7. iSwifting如何发送照片社区

    登录iSwifting社区 1,首先点击"帖子": 2,点击"照片": 3.点击"选择文件上传" 4,上传后的照片: 5,点击上传的照片: ...

  8. 顺序容器的insert使用方法

    #include <iostream> #include <algorithm> #include <vector> #include <string> ...

  9. Java模式(适配器型号)

    今天阅读Java该适配器模式,这里有一个小的总结和下谈感受.对于将来使用. 首先.让我们有关适配器先说说. 适应是“来源”至“目标”适应.其中连接这两个的关系是适配器.它负责“源”过度到“目标”. 举 ...

  10. JDBC调用存储过程

    一. JDBC调用存储过程 (1)使用存储过程SQL编写的程序代码,等一段语句和控制流语句.在创建时被编译成机器代码和存储在数据库中的client转让. 存储过程具有以下优势: 1.所生成的机器代码被 ...