本文主要是通过java读取项目中的文件，然后通过读取的文件名，在网页前端点击按钮实现图片轮流播放，这和其他人的图片轮流播放功能不一样，我看大部分人的播放图片都是把图片的播放路径写死，我用的这个方法的图片路径是动态变化的。
可以给大家看一下我项目里面图片的位置，这些图片我需要动态的读取出来，并实时显示，
接下来看一下我是怎么做的
下面来介绍一下主要过程
第一步，java代码读取计算机的文件,其中可以更改的是文件夹的绝对路径，可以根据自己的需要更改
package FileUtils;
import java.io.File;
/**
* Java读取文件夹下的所有文件名和文件
* @author Younger
*
*/
public class ReadFile {
public static void main(String[] args) {
//这是需要获取的文件夹路径
File file = new File("D:\\机器人项目测试文件夹\\test2\\web\\PictureCatch\\2022-07-17");
File[] array = file.listFiles();
System.out.println(array[2].getName());
}
}
我的项目中图片的位置是这个
所以我改为的上面的绝对路径，这一步我们就可以读取图片的名字。
第二部，读取文件中变化的内容，我们要想把图片动态读取出来，就要知道图片的哪一些内容是变化的，我们知道图片的后缀名（.jpg/.png），这些是不会变化的，所以我们要通过java读取变化的内容，为后面动态读取做准备。
下面是java读取图片文件名前缀的代码。
package FileUtils;
import java.io.File;
import java.io.UnsupportedEncodingException;
/**
* @author Administrator
*
*/
public class StringSubUtils {
/**
* 判断是否是一个中文汉字
*
* @param c
* 字符
* @return true表示是中文汉字，false表示是英文字母
* @throws UnsupportedEncodingException
* 使用了JAVA不支持的编码格式
*/
public static boolean isChineseChar(char c) throws UnsupportedEncodingException {
// 如果字节数大于1，是汉字
// 以这种方式区别英文字母和中文汉字并不是十分严谨，但在这个题目中，这样判断已经足够了
return String.valueOf(c).getBytes("utf-8").length > 1;
}
/**
* 计算当前String字符串所占的总Byte长度
*
* @param args
* 要截取的字符串
* @return 返回值int型，字符串所占的字节长度，如果args为空或者“”则返回0
* @throws UnsupportedEncodingException
*/
public static int getStringByteLenths(String args) throws UnsupportedEncodingException {
return args != null && args != "" ? args.getBytes("utf-8").length : 0;
}
/**
* 获取与字符串每一个char对应的字节长度数组
*
* @param args
* 要计算的目标字符串
* @return int[] 数组类型，返回与字符串每一个char对应的字节长度数组
* @throws UnsupportedEncodingException
*/
public static int[] getByteLenArrays(String args) throws UnsupportedEncodingException {
char[] strlen = args.toCharArray();
int[] charlen = new int[strlen.length];
for (int i = 0; i < strlen.length; i++) {
charlen[i] = String.valueOf(strlen[i]).getBytes("utf-8").length;
}
return charlen;
}
public static String substringByte(String orignal, int start, int count) {
// 如果目标字符串为空，则直接返回，不进入截取逻辑；
if (orignal == null || "".equals(orignal))
return orignal;
// 截取Byte长度必须>0
if (count <= 0)
return orignal;
// 截取的起始字节数必须比
if (start < 0)
start = 0;
// 目标char Pull buff缓存区间；
StringBuffer buff = new StringBuffer();
try {
// 截取字节起始字节位置大于目标String的Byte的length则返回空值
if (start >= getStringByteLenths(orignal))
return null;
// int[] arrlen=getByteLenArrays(orignal);
int len = 0;
char c;
// 遍历String的每一个Char字符，计算当前总长度
// 如果到当前Char的的字节长度大于要截取的字符总长度，则跳出循环返回截取的字符串。
for (int i = 0; i < orignal.toCharArray().length; i++) {
c = orignal.charAt(i);
// 当起始位置为0时候
if (start == 0) {
len += String.valueOf(c).getBytes("utf-8").length;
if (len <= count)
buff.append(c);
else
break;
} else {
// 截取字符串从非0位置开始
len += String.valueOf(c).getBytes("utf-8").length;
if (len >= start && len <= start + count) {
buff.append(c);
}
if (len > start + count)
break;
}
}
} catch (UnsupportedEncodingException e) {
e.printStackTrace();
}
// 返回最终截取的字符结果;
// 创建String对象，传入目标char Buff对象
return new String(buff);
}
/**
* 截取指定长度字符串
*
* @param orignal
* 要截取的目标字符串
* @param count
* 指定截取长度
* @return 返回截取后的字符串
*/
public static String substringByte(String orignal, int count) {
return substringByte(orignal, 0, count);
}
public static void main(String[] args) {
// 原始字符串
File file = new File("D:\\机器人项目测试文件夹\\test2\\web\\PictureCatch\\2022-07-17");
File[] array = file.listFiles();
System.out.println(StringSubUtils.substringByte(array[1].getName(), 28));
}
}
这部分代码里面，我们可以改动的是要获取字符窜的长度，即图片文件名的长度，我的图片名字比较长，所以取的是28，你们可以根据自己的图片长度选择数字。以上java代码准备完毕，下面就是在网页端jsp代码中编写自己要的需求，开始第三步，建立jsp文件(不会jsp建立的可以去看其他博主的文章，我这里不讲)
第三步，jsp代码，首先建立图片的承接标签，这里使用的是img
<div >
<img id="picture" style="width: 230px;height: 260px" alt="">
</div>
然后引入刚才自己写的java代码，也就是相应的包，
<%@ page import="java.io.File" %>
<%@ page import="FileUtils.StringSubUtils" %>
接下来引入java
<table>
<%
File file = new File("D:\\机器人项目测试文件夹\\test2\\web\\PictureCatch\\2022-07-17");
File[] array = file.listFiles();
for(int i = array.length-3; i< array.length; i++){
String name = StringSubUtils.substringByte(array[i].getName(), 28);
%>
<tr>
<td ><input style="display: none" type="text" value="<%=name%>"></td>
<td ><button onclick="playlist(this)"> 播放</button> </td>
</tr>
<%
}
%>
</table
这部分代码主要是通过java自动生成播放标签，我在for循环里面，i的取值我取得是文件夹里面的后三张，这个可以根据自己的需求自己确定，如果你要想播放文件夹里面的所有图片，那i的取值可以从0开始，到这一步之后，我们开始编写方法代码。
播放的方法代码如下：
<script>
function playlist(element) {
var Picture =document.getElementById('picture');
let element_td = element.parentNode;
let element_tr = element_td.parentNode;
let element_first_td = element_tr.getElementsByTagName('td');
let element_first_td_input = element_first_td[0].childNodes[0];
let eftiv = element_first_td_input.value;
let name;
name = 'PictureCatch/2022-07-17/' + eftiv + '.jpg';
Picture.src = name;
// Picture.play();
}
这个播放图片的方法，主要是为了给图片的img动态传递地址，做到src可变化。
下面是整个jsp的代码
<%@ page import="java.io.File" %>
<%@ page import="FileUtils.StringSubUtils" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<div >
<img id="picture" style="width: 230px;height: 260px" alt="">
</div>
<table>
<%
File file = new File("D:\\机器人项目测试文件夹\\test2\\web\\PictureCatch\\2022-07-17");
File[] array = file.listFiles();
for(int i = array.length-3; i< array.length; i++){
String name = StringSubUtils.substringByte(array[i].getName(), 28);
%>
<tr>
<td ><input style="display: none" type="text" value="<%=name%>"></td>
<td ><button onclick="playlist(this)"> 播放</button> </td>
</tr>
<%
}
%>
</table>
<script>
function playlist(element) {
var Picture =document.getElementById('picture');
let element_td = element.parentNode;
let element_tr = element_td.parentNode;
let element_first_td = element_tr.getElementsByTagName('td');
let element_first_td_input = element_first_td[0].childNodes[0];
let eftiv = element_first_td_input.value;
let name;
name = 'PictureCatch/2022-07-17/' + eftiv + '.jpg';
Picture.src = name;
// Picture.play();
}
</script>
</body>
</html>
最后就是展示的效果
可以看到前端已经动态生成了按钮，因为我要读取三张图片，所以就只有三个按钮
我点击按钮之后出来的效果如下
到这里，整个功能就实现了，动态传递参数，实现动态读取图片。