需求：前臺頁面的圖片從伺服器中動態提取

思路：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>

$.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);
    	    },
    	});