Web---自己写的一个简单云相册(1)~

简介: Web---自己写的一个简单云相册~

实现的功能是:

用户可以一次上传一个至多个文件。

用户可以下载其他人上传的图片。

用户可以查看其他所有人的图片。

用户只能删除通过自己IP上传的图片。


用到的技术:

文件上传下载、设计模式、Dom4j、xPath等。


先看下2个页面:

image.png

image.png



源代码:


web.xml:

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0" 
    xmlns="http://java.sun.com/xml/ns/javaee" 
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
    http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
  <display-name></display-name>
  <servlet>
    <servlet-name>UploadServlet</servlet-name>
    <servlet-class>cn.hncu.servlets.UploadServlet</servlet-class>
  </servlet>
  <servlet>
    <servlet-name>cloudPhotoServlet</servlet-name>
    <servlet-class>cn.hncu.servlets.cloudPhotoServlet</servlet-class>
  </servlet>
  <servlet>
    <servlet-name>DownServlet</servlet-name>
    <servlet-class>cn.hncu.servlets.DownServlet</servlet-class>
  </servlet>
  <servlet>
    <servlet-name>DelServlet</servlet-name>
    <servlet-class>cn.hncu.servlets.DelServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>UploadServlet</servlet-name>
    <url-pattern>/upload</url-pattern>
  </servlet-mapping>
  <servlet-mapping>
    <servlet-name>cloudPhotoServlet</servlet-name>
    <url-pattern>/cloudPhoto</url-pattern>
  </servlet-mapping>
  <servlet-mapping>
    <servlet-name>DownServlet</servlet-name>
    <url-pattern>/servlet/DownServlet</url-pattern>
  </servlet-mapping>
  <servlet-mapping>
    <servlet-name>DelServlet</servlet-name>
    <url-pattern>/servlet/DelServlet</url-pattern>
  </servlet-mapping>    
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>

index.jsp:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>chx云相册</title>
    <script type="text/javascript">
        function delFile(input){
            table = input.parentElement.parentElement.parentElement;//table.nodeName  TBODY
            table.removeChild(input.parentElement.parentElement);
        }
        var t=1;
        function addFile(input){
            tr = input.parentElement.parentElement;
            //alert(tr.nodeName);
            var str = "<td>选择文件:</td>"+
                "<td> <input type='file' name='file"+t+"'> </td> "+
                "<td>文件说明:</td>"+
                "<td> <input type='text' name='text"+t+"'> </td> "+
                "<td> <input type='button' value='删除文件' onclick='delFile(this)'> </td>";
            tr.insertAdjacentHTML("beforeBegin",str);
        }
        function move(){
            window.location.href="/myPhoto/cloudPhoto";
        }
    </script>
    <style type="text/css">
        #font{
            color:red;
        }
    </style>
  </head>
  <body>
    <h1><font id="font">相册上传:</font></h1>
    <form action="/myPhoto/upload" method="post" enctype="multipart/form-data">
        <table border="1px" bordercolor="red">
            <tr>
                <td>选择文件:</td>
                <td> <input type="file" name="file1"> </td> 
                <td>文件说明:</td>
                <td> <input type="text" name="text1"> </td> 
                <td> <input type="button" value="删 除 文 件" onclick="delFile(this)"> </td>
            </tr>
            <tr>
                <td colspan=2> <input type="submit" value="上 传 文 件"> </td>
                <td colspan=3> <input type="button" value="添 加 文 件" onclick="addFile(this)"> </td>
            </tr>
        </table>
    </form>
    <form action="/myPhoto/cloudPhoto" method="post" enctype="multipart/form-data">
        <table border="1px;double;#ff0000">
            <tr>
                <td colspan=5><input type="submit" value="进 入 云 相 册" onclick="move()"></td>
            </tr>
        </table>
    </form>
  </body>
</html>

photo.xml:

<?xml version="1.0" encoding="UTF-8"?>
<photos>
</photos>


MyUtils.java:

package cn.hncu.utils;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.UUID;
public class MyUtils {
    /**
     * @return 获取UUID
     */
    public static String getUUID(){
        return UUID.randomUUID().toString().replace("-", "");
    }
    /**
     * @param uuid
     * @return 通过uuid,获得打散后的路径
     */
    public static String getDir(String uuid){
        String dir1 = Integer.toHexString( uuid.hashCode() & 0xf );
        String dir2 = Integer.toHexString( (uuid.hashCode() & 0xf0)>>4 );
        return "/"+dir1+"/"+dir2;
    }
    //日期时间格式
    private static SimpleDateFormat sdf = new SimpleDateFormat("yyyy年MM月dd日 HH:mm:ss");
    /**
     * @return 返回的是上传的时候的日期时间
     */
    public static String getCurrentDateTime(){
        return sdf.format(new Date());
    }
}

Dom4jFactory.java:

package cn.hncu.utils;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.UnsupportedEncodingException;
import org.dom4j.Document;
import org.dom4j.DocumentException;
import org.dom4j.Element;
import org.dom4j.Node;
import org.dom4j.io.SAXReader;
import org.dom4j.io.XMLWriter;
public class Dom4jFactory {
    private static Document dom=null;
    private static String path;
    //静态块!只会运行一次!特点是在类加载的时候就执行
    static{
        try {
            SAXReader sax = new SAXReader();
            //因为我们的资源已经从myelipse中发布到tomcat服务器中了,所以跟原来的纯Java项目不一样了。
            //利用当前类找到它的类加载器,然后通过该类加载器再去获得资源路径
            path = Dom4jFactory.class.getClassLoader().getResource("photo.xml").getPath();
            //getClassLoader()返回:加载此对象所表示的类或接口的类加载器
            //public URL getResource(String name)返回:读取资源的 URL 对象;如果找不到该资源,或者调用者没有足够的权限获取该资源,则返回 null。
            //此方法首先搜索资源的父类加载器;如果父类加载器为 null,则搜索的路径就是虚拟机的内置类加载器的路径。
            //public String getPath()获取此 URL 的路径部分。 
            System.out.println(path);
            dom = sax.read(new FileInputStream(path));
        } catch (FileNotFoundException e) {
            throw new RuntimeException(e);
        } catch (DocumentException e) {
            throw new RuntimeException(e);
        }
    }
    /**
     * @return 获取相册的Document
     */
    public static Document getDocument(){
        return dom;
    }
    /**
     * 进行photo.xml的保存,保存到本地
     */
    public static boolean save(){
        try {
            XMLWriter w = new XMLWriter(new FileOutputStream(path));
            w.write(dom);
            w.close();
            return true;
        } catch (UnsupportedEncodingException e) {
            return false;
        } catch (FileNotFoundException e) {
            return false;
        } catch (IOException e) {
            return false;
        }
    }
    public static boolean del(String uuid){
        Node node = dom.selectSingleNode("[@uuid='"+uuid+"']");
        if(node==null){
            return false;
        }
        node.getParent().remove(node);
        return true;
    }
    /**
     * 测试用
     * @param args
     */
    public static void main(String[] args){
        System.out.println( getDocument() );
    }
}

PhotoModel.java-值对象

package cn.hncu.domain;
/**
 * 值对象封装
 * @author 陈浩翔
 * 2016-7-24
 */
public class PhotoModel {
    private String uuid;//uuid
    private String realName="";//图片真实文件名(上传时的文件名)
    private String ext;//后缀名
    private String dir;//打散后的路径
    private String dateTime;//上传文件的时间
    private String ip;//上传者的IP
    private String desc;//文件的说明
    public String getUuid() {
        return uuid;
    }
    public void setUuid(String uuid) {
        this.uuid = uuid;
    }
    public String getRealName() {
        return realName;
    }
    public void setRealName(String realName) {
        this.realName = realName;
    }
    public String getExt() {
        return ext;
    }
    public void setExt(String ext) {
        this.ext = ext;
    }
    public String getDir() {
        return dir;
    }
    public void setDir(String dir) {
        this.dir = dir;
    }
    public String getDateTime() {
        return dateTime;
    }
    public void setDateTime(String dateTime) {
        this.dateTime = dateTime;
    }
    public String getIp() {
        return ip;
    }
    public void setIp(String ip) {
        this.ip = ip;
    }
    public String getDesc() {
        return desc;
    }
    public void setDesc(String desc) {
        this.desc = desc;
    }
    @Override
    public String toString() {
        return "PhotoModel [uuid=" + uuid + ", realName=" + realName + ", ext="
                + ext + ", dir=" + dir + ", dateTime=" + dateTime + ", ip="
                + ip + ", desc=" + desc + "]";
    }
}


PhotoDao.java:

package cn.hncu.photoDao.Dao;
import java.util.List;
import cn.hncu.domain.PhotoModel;
public interface PhotoDao {
    /**
     * @param photo
     * @return 数据的保存
     */
    public boolean save(PhotoModel photo);
    /**
     * @return 返回所所有的图片信息
     */
    public List<PhotoModel> getAll();
    /**
     * @param uuid
     * @return 通过uuid 查找那个被封装的值对象
     */
    public PhotoModel getSingleByUuid(String uuid);
    /**
     * @param uuid
     * @return 通过uuid删除photos.xml中该图片的信息
     */
    public boolean deleteXml(String uuid);
    /**
     * @param dir
     * @return 通过路径删除服务器磁盘中该图片的信息
     */
    public boolean deleteFile(String pathFileName);
}
目录
相关文章
|
前端开发
Web前端实现3D旋转魔方相册【超详细】
Web前端实现3D旋转魔方相册【超详细】
910 0
Web---自己写的一个简单云相册(2)~
Web---自己写的一个简单云相册~
169 0
|
Web App开发 XML JavaScript
Web---自己写的一个简单云相册~
实现的功能是: 用户可以一次上传一个至多个文件。 用户可以下载其他人上传的图片。 用户可以查看其他所有人的图片。 用户只能删除通过自己IP上传的图片。 用到的技术: 文件上传下载、设计模式、Dom4j、xPath等。
992 0
|
3月前
|
XML JSON API
ServiceStack:不仅仅是一个高性能Web API和微服务框架,更是一站式解决方案——深入解析其多协议支持及简便开发流程,带您体验前所未有的.NET开发效率革命
【10月更文挑战第9天】ServiceStack 是一个高性能的 Web API 和微服务框架,支持 JSON、XML、CSV 等多种数据格式。它简化了 .NET 应用的开发流程,提供了直观的 RESTful 服务构建方式。ServiceStack 支持高并发请求和复杂业务逻辑,安装简单,通过 NuGet 包管理器即可快速集成。示例代码展示了如何创建一个返回当前日期的简单服务,包括定义请求和响应 DTO、实现服务逻辑、配置路由和宿主。ServiceStack 还支持 WebSocket、SignalR 等实时通信协议,具备自动验证、自动过滤器等丰富功能,适合快速搭建高性能、可扩展的服务端应用。
214 3
|
1月前
|
前端开发 安全 JavaScript
2025年,Web3开发学习路线全指南
本文提供了一条针对Dapp应用开发的学习路线,涵盖了Web3领域的重要技术栈,如区块链基础、以太坊技术、Solidity编程、智能合约开发及安全、web3.js和ethers.js库的使用、Truffle框架等。文章首先分析了国内区块链企业的技术需求,随后详细介绍了每个技术点的学习资源和方法,旨在帮助初学者系统地掌握Dapp开发所需的知识和技能。
2025年,Web3开发学习路线全指南
|
2月前
|
设计模式 前端开发 数据库
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第27天】本文介绍了Django框架在Python Web开发中的应用,涵盖了Django与Flask等框架的比较、项目结构、模型、视图、模板和URL配置等内容,并展示了实际代码示例,帮助读者快速掌握Django全栈开发的核心技术。
234 45
|
2月前
|
存储 前端开发 JavaScript
如何在项目中高效地进行 Web 组件化开发
高效地进行 Web 组件化开发需要从多个方面入手,通过明确目标、合理规划、规范开发、加强测试等一系列措施,实现组件的高效管理和利用,从而提高项目的整体开发效率和质量,为用户提供更好的体验。
45 7
|
2月前
|
开发框架 搜索推荐 数据可视化
Django框架适合开发哪种类型的Web应用程序?
Django 框架凭借其强大的功能、稳定性和可扩展性,几乎可以适应各种类型的 Web 应用程序开发需求。无论是简单的网站还是复杂的企业级系统,Django 都能提供可靠的支持,帮助开发者快速构建高质量的应用。同时,其活跃的社区和丰富的资源也为开发者在项目实施过程中提供了有力的保障。
|
2月前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
53 2