中午有限時間寫這博文,前言就不必多說了,直奔主題吧。
BUI是一個前端框架,關于BUI的介紹請看博主的文章[那些年用過的一些前端框架](http://blog.csdn.net/u013142781/article/details/50590458)。
下面我們開始實例的講解!
### 一、效果演示:

上傳成功后,會發現本地相應的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](http://download.csdn.net/detail/u013142781/9421985)
下載源碼,項目跑起來之后訪問如下url即可跳轉到文件上傳頁面:
~~~
http://localhost:8080/first_maven_project/index.jhtml
~~~
時間有限,就介紹到這里了,如有什么不明白的地方,歡迎私信或評論交流。
- 前言
- Java生成中間logo的二維碼(還可以加上二維碼名稱哦)
- Java我的高效編程之常用函數
- AES加密解密&&SHA1、SHA加密&&MD5加密
- Java中synchronized的使用實例
- Java基礎之集合
- Java基礎之泛型
- Java基礎之枚舉妙用
- 那些年用過的一些前端框架
- 關于正則,那些年一直存在的疑惑解答(正則菜鳥不容錯過)
- 給pdf文件添加防偽水印logo(附工程源碼下載)
- SpringMVC+BUI實現文件上傳(附詳解,源碼下載)
- Java異常封裝(自己定義錯誤碼和描述,附源碼)
- javaweb異常提示信息統一處理(使用springmvc,附源碼)
- 關于Java,那些我心存疑惑的事(不斷更新中...)
- 深入Java虛擬機(1)——Java體系結構
- 深入Java虛擬機(2)——Java的平臺無關性
- 深入Java虛擬機(3)——安全
- 深入Java虛擬機(4)——網絡移動性
- Linux文件編輯命令詳細整理
- 阿里云服務器云數據庫免費體驗(Java Web詳細實例)
- 項目部署、配置、查錯常用到的Linux命令
- Shell腳本了解
- Ajax原理學習
- linux下安裝apache(httpd-2.4.3版本)各種坑
- JSP九大內置對象
- Servlet再度學習
- 開發人員系統功能設計常用辦公軟件分享
- java.lang.ClassNotFoundException:org.springframework.web.context.ContextLoaderListener問題解決
- tomcat內存溢出解決,java.lang.OutOfMemoryError: PermGen space
- 《Java多線程編程核心技術》推薦
- 關于跳槽,是我心浮氣躁?還是我確實該離開了?
- Java I/O學習(附實例和詳解)
- Java經典設計模式之五大創建型模式(附實例和詳解)
- Java經典設計模式之七大結構型模式(附實例和詳解)
- Java經典設計模式之十一種行為型模式(附實例和詳解)
- Java內存管理
- SQL實例整理
- 數據庫面試常問的一些基本概念