开发者社区> ghost丶桃子> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

SpringMVC+BUI实现文件上传(附详解,源码下载)

简介:
+关注继续查看

目录(?)[+]

中午有限时间写这博文,前言就不必多说了,直奔主题吧。

BUI是一个前端框架,关于BUI的介绍请看博主的文章那些年用过的一些前端框架

下面我们开始实例的讲解!

一、效果演示:

这里写图片描述

上传成功后,会发现本地相应的sava目录下多了刚刚上传的图片(因为只是一个例子,就保存在本地目录了)。

这里写图片描述

二、实例讲解

本实例使用的环境,eclipse + maven。 
使用的技术:SpringMVC + BUI。

关于spring和SpringMVC的配置,这里就不多说明了。最后会提供源码下载,猿友们自行下载即可看到所有配置文件和代码。

SpringMVC想要实现上传文件,还需要添加如下jar依赖:

<!-- 文件上传相关包 -->
<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.3.1</version>
</dependency>
<dependency>
    <groupId>commons-io</groupId>
    <artifactId>commons-io</artifactId>
    <version>2.4</version>
</dependency>   
<dependency>
    <groupId>tomcat</groupId>
    <artifactId>catalina-manager</artifactId>
    <version>5.5.23</version>
</dependency>

另外还需要在spring-mvc.xml文件里面添加bean:

<!-- 支持上传文件 -->  
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"/>

下面是直接上controller代码:

package com.luo.controller;

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import org.springframework.web.servlet.ModelAndView;

@Controller
public class UserController {

    private final String SAVE_DIR = "C:/Users/luoguohui/Desktop/save/";

    @RequestMapping("/index.jhtml")
    public ModelAndView getIndex(HttpServletRequest request) throws IOException {
        ModelAndView mav = new ModelAndView("index");
        return mav;
    }

    @RequestMapping(value="/uploadFlie.json", method=RequestMethod.POST)
    @ResponseBody  
    public String uploadFlie(HttpServletRequest request)
            throws IOException {
        MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
        Map<String, MultipartFile> fileMap = multipartRequest.getFileMap();
        String fileName = null;
        for (Map.Entry<String, MultipartFile> entity : fileMap.entrySet()) {
            MultipartFile myfile = entity.getValue();
            fileName = myfile.getOriginalFilename();
            byte[] bs = myfile.getBytes();
            File file = new File(SAVE_DIR + fileName);
            FileOutputStream fos = new FileOutputStream(file);
            fos.write(bs);
            fos.close();
        }
        return "{\"url\" : \"" + SAVE_DIR + fileName + "\"}";
    }
}

上面的代码就不作过多的解释的了,基本一看就懂,就是把获取到的上传的文件放到如下目录:

C:/Users/luoguohui/Desktop/save/


下面上前端代码:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<link href="<%=request.getContextPath()%>/static/bui/css/dpl-min.css" rel="stylesheet">
<link href="<%=request.getContextPath()%>/static/bui/css/bui-min.css" rel="stylesheet">
<script src="<%=request.getContextPath()%>/static/bui/js/jquery-1.8.1.min.js"></script>
<script src="<%=request.getContextPath()%>/static/bui/js/bui-min.js"></script>
<script src="<%=request.getContextPath()%>/static/bui/js/layout-min.js"></script>
<script src="<%=request.getContextPath()%>/static/bui/js/uploader-min.js"></script>
</head>
<body>
    <div class="demo-content" style="margin:20px;">
        <div class="row">
        <div class="span8">
          <div id="J_Uploader">
          </div>
        </div>
    </div>
</body>
<script type="text/javascript">
// http://120.26.80.109/demo/uploader.php#uploader/checkSuccess.php
BUI.use('bui/uploader',function (Uploader) { 
    /**
     *  返回数据的格式
     *  默认是 {url : 'url'},否则认为上传失败
     *  可以通过isSuccess 更改判定成功失败的结构
     */
    var uploader = new Uploader.Uploader({
      render: '#J_Uploader',
      url: '<%=request.getContextPath()%>' + '/uploadFlie.json',
      rules: {
         //文的类型
         ext: ['.png,.jpg','文件类型只能为{0}'],
         //上传的最大个数
         max: [1, '文件的最大个数不能超过{0}个'],
         //文件大小的最小值,这个单位是kb
         minSize: [10, '文件的大小不能小于{0}KB'],
         //文件大小的最大值,单位也是kb
         maxSize: [2048, '文件大小不能大于2M']
      },
      //根据业务需求来判断上传是否成功
      isSuccess: function(result){
        if(result && result.url){
            BUI.Message.Alert("上传成功,文件已保存到目录:" + result.url);
        }else{
            BUI.Message.Alert("上传失败");
        }
      }
    }).render();
});
</script>
</html>


上面的代码主要是使用了BUI的上传文件功能,记得需要导入uploader-min.js才能上传哦,另外对上传的文件数量,格式,大小作了一些设置。

三、源码下载

http://download.csdn.net/detail/u013142781/9421985

下载源码,项目跑起来之后访问如下url即可跳转到文件上传页面:

http://localhost:8080/first_maven_project/index.jhtml


时间有限,就介绍到这里了,如有什么不明白的地方,欢迎私信或评论交流。













版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
SpringMVC文件上传下载实战(单文件、多文件)(下)
文件上传和下载是互联网web应用非常重要的组成部分,它是信息交互传输的重要渠道之一。你可能经常在网页上传下载文件,你可能也曾沉浸于互联网技术的神秘,而本篇就为你解开它神秘的面纱。
48 0
Spring全家通之SpringMVC核心及源码分析(一)
Spring MVC属于SpringFrameWork的后续产品,已经融合在Spring Web Flow里面。Spring 框架提供了构建 Web 应用程序的全功能 MVC 模块。使用 Spring 可插入的 MVC 架构,从而在使用Spring进行WEB开发时,可以选择使用Spring的Spring MVC框架或集成其他MVC开发框架。
27 0
基于SpringMVC的文件上传如何实现
基于SpringMVC的文件上传如何实现
85 0
算法笔试模拟题精解之“神秘消失”
本题可以通过观察规律得出解题思路,根据题意,两种颜色的书相邻摆放,就都会消失。可以得知只要两种颜色的书同时存在,就会处于不稳定的状态,总会有书消失,因此到最后的时候必然只能剩下一种颜色的书。
414 0
Spring MVC中的文件上传和下载
文件上传使用了apache commons fileupload 和commons IO, 在使用之前,相关jar包需要导入项目工程目录。
1172 0
基于Winform、WPF等的客户端文件下载
  有时候,我们用C#写一些客户端应用程序需要从服务器下载一些资源,如图片、dll、配置文件等。下面就来说一下,在Winform及WPF中如何下载文件。 我们的资源大多放在自己的网站上,或者从其他网站下载资源,我们需要给客户端一个URL,先给出代码:     /// /// ...
842 0
文章
问答
文章排行榜
最热
最新
相关电子书
更多
Spring框架入门
立即下载
Java Spring Boot开发实战系列课程【第15讲】:Spring Boot 2.0 API与Spring REST Docs实战
立即下载
Java Spring Boot开发实战系列课程【第7讲】:Spring Boot 2.0安全机制与MVC身份验证实战(Java面试题)
立即下载