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

页面导航:首页 > 网络编程 > JavaScript > java+js实现展示本地文件夹下的所有图片demo

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

来源: 作者: 时间:2016-01-23 10:23 【

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 CalculateGeoServlet(HttpServletRequest req,
            HttpServletResponse 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 ArrayList();
        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 = '
  • ' + data[i] + '
  • '; pic += 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;
    }

    效果:
    这里写图片描述


     

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<