easyui实现幻灯片
在【javaweb解决上传文件目录问题【*****】】的基础上做。
1、实现动态加载后台数据，并且显示照片。
表映射类：
package table; public class ImagePath { //用来存放文件路径的文件名 private String path; /** * @return the path */ public String getPath() { return path; } /** * @param path the path to set */ public void setPath(String path) { this.path = path; } }
servlet类：
package servlet; import java.io.File; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.annotation.MultipartConfig; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import net.sf.json.JSONArray; import net.sf.json.JSONObject; import table.ImagePath; /** * Servlet implementation class LoadingImgServlet */ @WebServlet("/getimg")//别名，jsp页面使用，起到 隐藏真实路径的效果，当然，他代表的是UploadSpotImgServlet这个类 @MultipartConfig public class LoadingImgServlet extends HttpServlet { private static final long serialVersionUID = 1L; /** * @see HttpServlet#HttpServlet() */ public LoadingImgServlet() { super(); // TODO Auto-generated constructor stub } /** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub response.setContentType("application/json; charset=utf-8"); response.setHeader("cache-control", "no-cache"); PrintWriter out = response.getWriter(); //获取用户名 String uid = request.getParameter("uid"); //获取与用户名相同的文件 //获取文件的根目录 String root="c:/temp1/upload"; out.print(readfile(root+"/"+uid,uid).toString()); out.flush(); out.close(); //返回json数据 } /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub doGet(request, response); } /** * filepath 根据需要使用 * @param filepath * @return */ protected JSONArray readfile(String filepath,String uid) { JSONArray array = new JSONArray(); try { File file = new File(filepath); if (!file.isDirectory()) { System.out.println("文件"); System.out.println("path=" + file.getPath()); System.out.println("absolutepath=" + file.getAbsolutePath()); System.out.println("name=" + file.getName()); } else if (file.isDirectory()) { System.out.println("文件夹"); String[] filelist = file.list(); for (int i = 0; i < filelist.length; i++) { File readfile = new File(filepath + "\\" + filelist[i]); if (!readfile.isDirectory()) { System.out.println("path=" + readfile.getPath()); System.out.println("absolutepath=" + readfile.getAbsolutePath()); System.out.println("name=" + readfile.getName()); ImagePath imagePath = new ImagePath(); imagePath.setPath("/upload/"+uid+"/"+readfile.getName());//不给真实路径，只给相对路径 array.add(JSONObject.fromObject(imagePath)); } else if (readfile.isDirectory()) { readfile(filepath + "\\" + filelist[i],uid); } } } } catch (Exception e) { System.out.println("readfile() Exception:" + e.getMessage()); } return array;//返回文件列表 } public static void main(String[] args) { LoadingImgServlet servlet = new LoadingImgServlet(); JSONArray array = servlet.readfile("c:/temp1/upload/root","root"); System.err.println(array.toString()); for (int i = 0; i <array.size(); i++) { System.out.println(array.get(i).toString()); } } }
jsp页面：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>文件上传页面</title> <link rel="stylesheet" type="text/css" href="js/easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="js/easyui/themes/icon.css"> <script type="text/javascript" src="js/easyui/jquery.min.js"></script> <script type="text/javascript" src="js/easyui/jquery.easyui.min.js"></script> <style type="text/css"> img{ width:500px; height:600px; } </style> </head> <body> <script type="text/javascript"> window.onload=function(){ if("${info}"!=""){ alert("${info}"); } } </script> <!-- 上传文件是上传到服务器上，而保存到数据库是文件名 --> <!-- 上传文件是以文件转换为二进制流的形式上传的 --> <!-- enctype="multipart/form-data"需要设置在form里面，否则无法提交文件 --> <form action="upload" method="post" enctype="multipart/form-data"> <table> <tr> <td></td> <td><h1>文件上传</h1></td> </tr> <tr> <td>文件描述:</td> <td><input type="text" name="desc"/></td> </tr> <tr> <td>用户id:</td> <td><input type="text" name="uid"/></td> </tr> <tr> <td>上传文件:</td> <td><input type="file" name="file"/></td> </tr> <tr> <td></td> <td><input type="submit" value="上传文件"/></td> </tr> </table> </form> <%=session.getAttribute("userid") %> <!-- 设计：本页面发起请求，传的是用户名,获得图片地址，显示，用js动态加入标签 --> <!-- 后台json数据主要包含的是文件路径 --> <div id="tt" class="easyui-tabs" style="width:600px;height:800px;"> </div> <div class="test"></div> </body> </html> <script type="text/javascript"> function addImg(){ var url_1 = "<%=basePath%>"; $.ajax({ url: url_1+'/getimg', type: 'post', dataType: 'json', data:{'uid':'root'}, timeout: 1000, cache: false, async:false, beforeSend: LoadFunction, //加载执行方法 error: erryFunction, //错误执行方法 success: succFunction //成功执行方法 }); function LoadFunction() { $(".left").html('加载中...'); } function erryFunction() { alert("error"); } function succFunction(tt) { $(".easyui-tabs").html(''); var json = eval(tt); //数组 //$(".left").html("标题:<br>" + json[0].title + " 内容:<br/> " + json[0].article + "<br/>日期: " + json[0].dat + "<br/>"); $.each(json, function (index, item) { //循环获取数据 $(".easyui-tabs").append("<div title='Shirt"+(index+1)+"' style='padding:20px;'><img src='"+json[index].path+"'></div>"); $(".test").append(json[index].path+"<br/>"); }); } //循环json数据 /* $.each(json,function(index,m){ //将这些对象加进去 $('.easyui-tabs').append("<div title='Shirt"+index+"' style='padding:20px;'><img src='"+json[index].myfile+"'></div>"); }); */ } $(function(){ //添加照片 //播放幻灯片 var index = 0; var t = $('#tt'); var tabs = t.tabs('tabs'); setInterval(function(){ t.tabs('select', tabs[index].panel('options').title); index++; if (index >= tabs.length){ index = 0; } }, 1000); }); addImg(); </script>
注意：js代码的顺序关系到能不能得到预期结果。
总结：在之前配置的基础上，文件上传，这里做的主要是显示。如果想要根据用户ID或者用户名的目录显示，只需要ajax中的data:{'uid':'root'}改为获取登陆后的session即可。
自行调整，这里就不调整 了，做一个页面登陆，然后查询数据库，根据数据库将session加入，跳转到fileupload.jsp。然后fileupload.jsp页面有两个功能。
1、上传功能 ，对应之前的内容，同理将session给该页面作为命名，上传后就到了后台；
2、根据session，查询该用户的照片，显示。
