遍历文件夹中的文件（以图片为例）

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Flykos/article/details/52168543

需求：前台页面的图片从服务器中动态提取

思路：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;' onclick='update(\""+d+"\")'></input><br><br>";
        	    			html+="	<input type='button' value='删除' style='width: 60px;display:inline-block;' onclick='del(\""+d+"\")'></input>";
        	    		html+="</div>";
        	    	html+="</div>";
    	    	});
    	    	$("#pic").append(html);
    	    },
    	});