easyui实现幻灯片

Posted 2020-12-07 ciscolee

在【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;
    }
}

View Code

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());
            }
    }

}

View Code

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>

View Code

注意：js代码的顺序关系到能不能得到预期结果。

总结：在之前配置的基础上，文件上传，这里做的主要是显示。如果想要根据用户ID或者用户名的目录显示，只需要ajax中的data:{‘uid‘:‘root‘}改为获取登陆后的session即可。

自行调整，这里就不调整 了，做一个页面登陆，然后查询数据库，根据数据库将session加入，跳转到fileupload.jsp。然后fileupload.jsp页面有两个功能。

1、上传功能 ，对应之前的内容，同理将session给该页面作为命名，上传后就到了后台；

2、根据session，查询该用户的照片，显示。