前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >(强烈推荐)基于SSM和BootStrap的共享云盘系统设计(项目实现:文件上传与计算文件大小)

(强烈推荐)基于SSM和BootStrap的共享云盘系统设计(项目实现:文件上传与计算文件大小)

作者头像
天道Vax的时间宝藏
发布2021-08-11 14:44:04
8610
发布2021-08-11 14:44:04
举报
文章被收录于专栏:用户5305560的专栏

重 点:前、后台数据交互、AJax异步加载数据、文件读取

难 点:文件读取

内 容:登录成功后,上传文件。

image.png
image.png

图1 文件上传页面

1. 使用JavaScript实现上传文件

在WebContent/js目录下创建index.js文件,添加upload()方法,用于上传文件;当触发上传事件时,通过Ajax向后台传输数据,核心代码如下所示;

代码语言:javascript
复制
function upload(){
    var files = document.getElementById("input").files;
    if(files.length==0) {  
        alert("请选择文件");  
        return;  
    }
    var index = layer.load(1, {
        shade: [0.75,'#fff'] /0.1透明度的白色背景
    });
    var formData=new FormData();  
    for(var i=0;i<files.length;i++) {  
        formData.append("files",files[i]);  
    }
    formData.append("currentPath", currentPath);
    $.ajax({    
        url: 'file/upload.action',  
        type: 'POST',  
        cache: false,
        processData: false,  
        contentType: false,  
        data : formData,
        success : function(data) {
        if (data.success == true) {
        getFiles(currentPath);
        layer.closeAll('loading');
        }
        },
    });  
}

2. 控制层处理上传的数据

在FileController中添加upload()方法,用于处理文件上传并返回上传结果给前台,代码如下所示;

代码语言:javascript
复制
@Controller
@RequestMapping("/file")
public class FileController {
    @Autowired
    private HttpServletRequest request;

    @Autowired
    private FileService fileService;

    /**
     * 文件上传
     * 
     * @param files
     *            文件名(多个)
     * @param currentPath
     *            当前路径
     * @return Json对象
     */
    @RequestMapping("/upload")
    public @ResponseBody Result<String> upload(
            @RequestParam("files") MultipartFile[] files, String currentPath) {
        try {
            fileService.uploadFilePath(request, files, currentPath);
        } catch (Exception e) {
            return new Result<>(301, false, "上传失败");
        }
        return new Result<String>(305, true, "上传成功");
    }
}

3. 业务层处理上传的数据

在FileService中添加uploadFilePath()方法,用于实现文件的上传,通过循环的方式一次上传多个文件。在保存文档时,需将文件写入tomcat服务器中对应的用户目录下,并对于office文件(如docx、xlsx等格式),需借助于百度云盘进行保存,以便后期直接在线阅览此类文档,代码如下所示;

代码语言:javascript
复制
@Service
public class FileService {
    /**
     * 文件相对前缀
     */
    public static final String PREFIX = "WEB-INF" + File.separator + "file" + File.separator;
    /**
     * 新用户注册默认文件夹
     */
    public static final String[] DEFAULT_DIRECTORY = { "vido", "music", "source", "image", User.RECYCLE };
    @Autowired
    private UserDao userDao;
    @Autowired
    private FileDao fileDao;

    /**
     * 上传文件
     * 
     * @param request
     * @param files
     *            文件
     * @param currentPath
     *            当前路径
     * @throws Exception
     */
    public void uploadFilePath(HttpServletRequest request, MultipartFile[] files, String currentPath) throws Exception {
        for (MultipartFile file : files) {
            String fileName = file.getOriginalFilename();
            String filePath = getFileName(request, currentPath);
            File distFile = new File(filePath, fileName);
            if (!distFile.exists()) {
                file.transferTo(distFile);
                if ("office".equals(FileUtils.getFileType(distFile))) {
                    try {
                        String suffix = fileName.substring(fileName.lastIndexOf(".") + 1);
                        String documentId = FileUtils.getDocClient().createDocument(distFile, fileName, suffix)
                                .getDocumentId();
                        officeDao.addOffice(documentId, FileUtils.MD5(distFile));
                    } catch (Exception e) {
                    }
                }
            }
        }
        reSize(request);
    }
    ……
}

4. 重新计算文件大小

在FileService类中增加reSize()方法,当文件保存成功之后,需重新计算改用户的上传文件的大小,并将更新后的大小数据保存至数据库中,核心代码如下所示;

代码语言:javascript
复制
/**
 * 重新计算文件大小
 * 
 * @param request
 */
public void reSize(HttpServletRequest request) {
    String userName = UserUtils.getUsername(request);
    try {
        userDao.reSize(userName, countFileSize(request));
    } catch (Exception e) {
        e.printStackTrace();
    }
}

5. 文件的业务层计算文件大小

在FileService类中添加countFileSize()方法,用于计算该用户已上传文件的总大小,核心代码如下所示;

代码语言:javascript
复制
/**
 * 统计用户文件大小
 * 
 * @param request
 * @return
 */
public String countFileSize(HttpServletRequest request) {
    long countFileSize = countFileSize(new File(getFileName(request, null)));
    return FileUtils.getDataSize(countFileSize);
}

6. 数据层修改上传信息

在UserDao.xml文件中,添加更新SQL语句,将更新后用户所使用的空间大小保存至数据库,代码如下所示;

代码语言:javascript
复制
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="cn.allene.yun.dao.UserDao" >
     ……
    <update id="reSize">
        update user set countSize = #{formatSize} where username = #{username}
    </update>
     ……
</mapper>

7. 数据层查询上传信息

UserDao.xml文件中,添加查询SQL语句,用于查询最新的用户空间使用情况,代码如下所示;

代码语言:javascript
复制
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="cn.allene.yun.dao.UserDao" >
     ……
    <select id="getCountSize" parameterType="java.lang.String" resultType="java.lang.String">
        select countSize from user where username = #{username}
    </select>
     ……
</mapper>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020/07/17 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. 使用JavaScript实现上传文件
  • 2. 控制层处理上传的数据
  • 3. 业务层处理上传的数据
  • 4. 重新计算文件大小
  • 5. 文件的业务层计算文件大小
  • 6. 数据层修改上传信息
  • 7. 数据层查询上传信息
相关产品与服务
数据库
云数据库为企业提供了完善的关系型数据库、非关系型数据库、分析型数据库和数据库生态工具。您可以通过产品选择和组合搭建,轻松实现高可靠、高可用性、高性能等数据库需求。云数据库服务也可大幅减少您的运维工作量,更专注于业务发展,让企业一站式享受数据上云及分布式架构的技术红利!
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档