spring MVC + bootstrap实现文件上传示例(带进度条)

2025-05-29 0 65

最近学习了bootstrap,有结合了spring MVC写了个文件上传的示例,留做笔记,废话不多说,直接上代码

监听器类FileUploadProgressListener.Java

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28
package com.gpl.web.listener;

import javax.servlet.http.HttpSession;

import org.apache.commons.fileupload.ProgressListener;

import org.springframework.stereotype.Component;

import com.gpl.web.utils.Progress;

@Component

public class FileUploadProgressListener implements ProgressListener{

private HttpSession session;

public void setSession(HttpSession session){

this.session = session;

Progress status = new Progress();

session.setAttribute("status", status);

}

@Override

public void update(long bytesRead, long contentLength, int items) {

Progress status = (Progress) session.getAttribute("status");

status.setBytesRead(bytesRead);

status.setContentLength(contentLength);

status.setItems(items);

}

}

CustomerMyltipartResolver.java

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38
package com.gpl.web.listener;

import java.util.List;

import javax.servlet.http.HttpServletRequest;

import org.apache.commons.fileupload.FileItem;

import org.apache.commons.fileupload.FileUpload;

import org.apache.commons.fileupload.FileUploadBase;

import org.apache.commons.fileupload.FileUploadException;

import org.apache.commons.fileupload.servlet.ServletFileUpload;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.web.multipart.MaxUploadSizeExceededException;

import org.springframework.web.multipart.MultipartException;

import org.springframework.web.multipart.commons.CommonsMultipartResolver;

public class CustomMultipartResolver extends CommonsMultipartResolver{

@Autowired

private FileUploadProgressListener progressListener;

public void setFileUploadProgressListener(FileUploadProgressListener progressListener){

this.progressListener = progressListener;

}

public MultipartParsingResult parsingResult(HttpServletRequest request){

String encoding = determineEncoding(request);

FileUpload fileUpload = prepareFileUpload(encoding);

progressListener.setSession(request.getSession());

fileUpload.setProgressListener(progressListener);

try{

List<FileItem> fileItems = ((ServletFileUpload) fileUpload).parseRequest(request);

return parseFileItems(fileItems, encoding);

}catch(FileUploadBase.SizeLimitExceededException ex){

throw new MaxUploadSizeExceededException(fileUpload.getSizeMax(), ex);

}catch (FileUploadException e) {

throw new MultipartException("异常",e);

}

}

}

进度实体类Progress.java

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30
package com.gpl.web.utils;

public class Progress {

private long bytesRead;

private long contentLength;

private long items;

public long getBytesRead() {

return bytesRead;

}

public void setBytesRead(long bytesRead) {

this.bytesRead = bytesRead;

}

public long getContentLength() {

return contentLength;

}

public void setContentLength(long contentLength) {

this.contentLength = contentLength;

}

public long getItems() {

return items;

}

public void setItems(long items) {

this.items = items;

}

@Override

public String toString() {

return "Progress [bytesRead=" + bytesRead + ", contentLength=" + contentLength + ", items=" + items + "]";

}

}

spring配置文件需加入如下bean

?

1

2

3

4

5
<!-- 文件上传 -->

<bean id="multipartResolver" class="com.gpl.web.listener.CustomMultipartResolver">

<property name="defaultEncoding" value="utf-8"></property>

<property name="maxUploadSize" value="838860800"></property>

</bean>

controller层实现

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31
/**

* 文件上传

* @param request

* @param response

* @param file

* @throws IOException

*/

@RequestMapping(value = "/upload", method = RequestMethod.POST)

public void upload(HttpServletRequest request,HttpServletResponse response,@RequestParam("file") CommonsMultipartFile file)

{

try{

PrintWriter out;

boolean flag = false;

if(file.getSize() > 0){

String path = "/asserts/upload/files/excel/";

String uploadPath = request.getSession().getServletContext().getRealPath(path);

System.out.println(uploadPath);

FileUtils.copyInputStreamToFile(file.getInputStream(), new File(uploadPath,file.getOriginalFilename()));

flag = true;

}

out = response.getWriter();

if(flag == true){

out.print("1");

}else{

out.print("2");

}

}catch(Exception e){

e.printStackTrace();

}

}

前端代码

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14
<div id="uploadFileDlg" class="easyui-dialog" style="width:800px;text-align:center;"

closed="true">

<form id="uploadFileForm" method="post" style="width:100%;text-align:center;padding:20px 0;">

<input id="file" type="file" style="width:500px;display:inline-block;">

<button id="uploadBtn" class="easyui-linkButton" style="width:auto;display:inline-block;">上传</button>

</form>

<div class="progress progress-bar-striped active" style="display:none;">

<div id="progressBar" class="progress-bar progress-bar-info" role="progressbar"

aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"

style="width:0%;">

</div>

</div>

<table id="uploadBatchDg"></table>

</div>

页面ready加入的js代码

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33
$("#uploadBtn").attr("disabled",false);

$("#uploadBtn").click(function(){

var fileValue = $("#file").val();

if(fileValue == null || fileValue == ""){

layer.msg("请先选择文件");

return;

}

var obj = $("#file");

var photoExt=obj.val().substr(obj.val().lastIndexOf(".")).toLowerCase();//获得文件后缀名

if(photoExt!=".xls" && photoExt!=".xlsx"){

layer.msg("请选择xls或是xlsx格式的文件,不支持其他格式文件");

return false;

}

var fileSize = 0;

var isIE = /msie/i.test(navigator.userAgent) && !window.opera;

if (isIE && !obj.files) {

var filePath = obj.val();

var fileSystem = new ActiveXObject("Scripting.FileSystemObject");

var file = fileSystem.GetFile (filePath);

fileSize = file.Size;

}else {

fileSize = obj.get(0).files[0].size;

}

fileSize=Math.round(fileSize/1024*100)/100; //单位为KB

if(fileSize > 5000){

layer.msg("文件不能大于5M");

return false;

}

$("#progressBar").width("0%");

$(this).attr("disabled",true);

$("#progressBar").parent().show();

$("#progressBar").parent().addClass("active");

uploadFile();

上传文件js代码

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30
function uploadFile() {

var fileObj = $("#file").get(0).files[0]; // js 获取文件对象

console.info("上传的文件:"+fileObj);

var FileController = "${basePath}/batch/upload"; // 接收上传文件的后台地址

// FormData 对象

var form = new FormData();

// form.append("author", "hooyes"); // 可以增加表单数据

form.append("file", fileObj); // 文件对象

// XMLHttpRequest 对象

var xhr = new XMLHttpRequest();

xhr.open("post", FileController, true);

xhr.onload = function() {

layer.msg("上传完成");

$("#uploadBtn").attr('disabled', false);

$("#uploadBtn").val("上传");

$("#progressBar").parent().removeClass("active");

$("#progressBar").parent().hide();

};

xhr.upload.addEventListener("progress", progressFunction, false);

xhr.send(form);

}

function progressFunction(evt) {

var progressBar = $("#progressBar");

if (evt.lengthComputable) {

var completePercent = Math.round(evt.loaded / evt.total * 100)+ "%";

progressBar.width(completePercent);

$("#uploadBtn").val("正在上传 " + completePercent);

}

};

效果图

spring MVC + bootstrap实现文件上传示例(带进度条)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持快网idc。

原文链接:http://blog.csdn.net/wyccyw123456/article/details/52396449

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

快网idc优惠网 建站教程 spring MVC + bootstrap实现文件上传示例(带进度条) https://www.kuaiidc.com/118264.html

相关文章

发表评论
暂无评论