需求:前台页面的图片从服务器中动态提取
思路:1.遍历该图片文件夹
2.将所有图片名称以List集合传入前端页面
3.前端遍历,根据名称读取图片
工具:ajax
方法:$.each(json,function(i,d){拼接html})
一、遍历出图片名称List<String>
public List<String> fileList(HttpServletRequest request){
List<String> list = new ArrayList<String>();
String path = request.getSession().getServletContext().getRealPath("/");//项目的绝对路径
File file = new File(path+"/file/img");//文件夹路径
File[] files = file.listFiles();//遍历该文件夹
if(null!=files){
for (int i = 0; i < files.length; i++){
File file1 = files[i];
String name = file1.getName();//获取图片名称
list.add(name);
}
return list;
}else{
return null;
}
}
二、前台接收数据(ajax)
标签:
<div id="main" style="width:500px;margin:0 auto;padding:10px;">
<input type="button" id="btn_add" value="新增" style="width: 60px;display:inline-block;margin-left:20px;"></input></div>
JS操作(导入JQuery相关js文件)
$.ajax({
url:'#', //请求的url地址
dataType:"json",
type:"POST",
success:function(json){
var html="";
$.each(json,function(i,d){
html+="<div style='width:445px;height:220px;overflow:hidden;margin:20px auto;padding:5px;border:2px solid orange;'>";
html+="<div style='width:350px;float: left;'>";
html+=" <img src='img/saleimage/"+d+"' />";
html+="</div>";
html+="<div style='width:80px;float: left;padding:25px 10px;'>";
html+=" <input type='button' value='替换' style='width: 60px;display:inline-block;' οnclick='update(\""+d+"\")'></input><br><br>";
html+=" <input type='button' value='删除' style='width: 60px;display:inline-block;' οnclick='del(\""+d+"\")'></input>";
html+="</div>";
html+="</div>";
});
$("#pic").append(html);
},
});