SpringMVC实现的文件上传进度条Bootstrap展示

背景

想做一个带进度条的文件上传，可是搜索的结果都不是很满意，最后参考一个实践了一下，基于SpringMVC实现，前端采用Bootstrap。

整理一下进度条的实现。

效果

先看最后的效果

实现步骤

前提

SpringMVC已经配置好了

第一步

写一个进度条pojo

Progress.java

/**
* 进度条
* @author 程高伟
*
* @date 2016年7月5日 上午9:51:47
*/
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 + "]";
}

}

第二步 实现ProgressListener

依赖的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.5</version>
</dependency>

FileUploadProgressListener.java

import javax.servlet.http.HttpSession;

import org.apache.commons.fileupload.ProgressListener;
import org.springframework.stereotype.Component;
import com.cdpts.wechat.model.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);

}

}

第三步 继承CommonsMultipartResolver

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;

import com.cdpts.wechat.service.FileUploadProgressListener;
public class CustomMultipartResolver extends CommonsMultipartResolver {
// 注入第二步写的FileUploadProgressListener
@Autowired
private FileUploadProgressListener progressListener;

public void setFileUploadProgressListener(FileUploadProgressListener progressListener) {
this.progressListener = progressListener;
}

@Override
public MultipartParsingResult parseRequest(HttpServletRequest request) throws MultipartException {
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 ex) {
throw new MultipartException("Could not parse multipart servlet request", ex);
}
}

}

第四步

在springmvc的配置文件中配置第三步的CustomMultipartResolver

<bean id="multipartResolver" class="com.cdpts.wechat.utils.spring.CustomMultipartResolver"/>

第五步

编写Controller

// 处理上传的
@RequestMapping("/upload")
public void upload(HttpServletRequest request, HttpServletResponse response,
@RequestParam("file") CommonsMultipartFile file) throws IOException {
PrintWriter out;
boolean flag = false;
if (file.getSize() > 0) {
String path = "/assets/upload/files/";
String uploadPath = request.getSession().getServletContext().getRealPath(path);
try {
FileUtils.copyInputStreamToFile(file.getInputStream(),
new File(uploadPath, file.getOriginalFilename()));
flag = true;
} catch (Exception e) {
}

}
out = response.getWriter();
if (flag == true) {
out.print("1");
} else {
out.print("2");
}
}

第六步 开发页面

需要bootstrap

html部分

<!-- Modal -->
<div id="batchImportModal" class="modal fade" role="dialog"
aria-labelledby="gridSystemModalLabel">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">批量导入用户</h4>
</div>
<div class="modal-body">
<div class="form-group" id="passwordDiv">
<label>选择用户数据文件</label>
<input class="form-control" type="file" id="batchFile">
</div>
<div class="progress progress-striped active" style="display: none">
<div id="progressBar" class="progress-bar progress-bar-info"
role="progressbar" aria-valuemin="0" aria-valuenow="0"
aria-valuemax="100" style="width: 0%">
</div>
</div>
<div class="form-group">
<input id="batchUploadBtn" type="submit" name="submit" class="btn btn-success" value="上传" />
</div>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->

JavaScript部分

$(function() {
// 批量导入按钮
$("#batchImportBtn").click(function(){
$('#batchImportModal').modal('show');
})
var base = $("#base").val().trim();
// 上传按钮
$("#batchUploadBtn").attr('disabled', true);
// 上传文件按钮点击的时候
$("#batchUploadBtn").click(function() {
// 进度条归零
$("#progressBar").width("0%");
// 上传按钮禁用
$(this).attr('disabled', true);
// 进度条显示
$("#progressBar").parent().show();
$("#progressBar").parent().addClass("active");
// 上传文件
UpladFile();
})

// 文件修改时
$("#batchFile").change(function() {
$("#batchUploadBtn").val("上传");
$("#progressBar").width("0%");
var file = $(this).prop('files');
if (file.length != 0) {
$("#batchUploadBtn").attr('disabled', false);
}

});

function UpladFile() {
var fileObj = $("#batchFile").get(0).files[0]; // js 获取文件对象
console.info("上传的文件："+fileObj);
var FileController = base + "/admin/user/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() {
// ShowSuccess("上传完成");
alert("上传完成");
$("#batchUploadBtn").attr('disabled', false);
$("#batchUploadBtn").val("上传");
$("#progressBar").parent().removeClass("active");
$("#progressBar").parent().hide();
//$('#myModal').modal('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);
$("#batchUploadBtn").val("正在上传 " + completePercent);
}
};
}

我写了一个简单的开源项目，项目中有一个带进度条的文件上传

效果图如下



完整的jsp页面地址

开源项目github地址，如果觉得可以别忘了给个star哦。

数据库脚本地址

https://github.com/peer44/java-rbac/blob/master/jrbac/src/main/resources/sql/jrbac.sql

参考文献

参考的博客

Bootstrap官网