spring MVC + bootstrap实现文件上传示例（带进度条）
更新时间：2017年03月02日 16:02:19 作者：公羽土成
本篇文章主要介绍了spring MVC + bootstrap实现文件上传示例（带进度条），非常具有使用价值，有需要的朋友可以了解一下。
最近学习了bootstrap，有结合了spring MVC写了个文件上传的示例，留做笔记，废话不多说，直接上代码
监听器类FileUploadProgressListener.Java
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
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
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
<!-- 文件上传 -->
<bean id="multipartResolver" class="com.gpl.web.listener.CustomMultipartResolver">
<property name="defaultEncoding" value="utf-8"></property>
<property name="maxUploadSize" value="838860800"></property>
</bean>
controller层实现
/**
* 文件上传
* @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();
}
}
前端代码
<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代码
$("#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代码
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);
}
};
效果图
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Java中的WeakHashMap简析,Map 的子类常见的有 HashMap、Hashtable、ConcurrentHashMap、LinkedHashMap 等,WeakHashMap,直译就是,虚弱的 HashMap,从名字可得知其和 HashMap 有关,需要的朋友可以参考下2023-09-09
这篇文章主要给大家介绍了关于Java中初始化List的5种方法，文中通过示例代码介绍的非常详细，对大家学习或使用java具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-11-11
这篇文章主要介绍了关于MyBatis各种SQL操作详解，MyBatis 是一款优秀的半自动的ORM持久层框架，它支持自定义 SQL、存储过程以及高级映射,需要的朋友可以参考下2023-05-05
面试总结：秒杀设计、AQS 、synchronized相关问题
Java语言的关键字，当它用来修饰一个方法或者一个代码块的时候，能够保证在同一时刻最多只有一个线程执行该段代码。本文给大家介绍java中 synchronized的用法，对本文感兴趣的朋友一起看看吧2021-06-06
线程通讯指的是多个线程之间通过共享内存或消息传递等方式来协调和同步它们的执行，线程通讯的实现方式主要有以下两种：共享内存和消息传递，本文详细介绍了Java线程是如何通讯的，感兴趣的同学可以参考阅读2023-05-05
这篇文章主要介绍了聊聊Java中是什么方法导致的线程阻塞，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2021-02-02
这篇文章主要介绍了log4j2.xml文件详解及在日志中加入全局guid，基于很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2021-12-12
java语言中，数组是一种最简单的复合数据类型。数组是有序数据的集合，数组中的每个元素具有相同的数据类型，可以用一个统一的数组名和下标来唯一地确定数组中的元素。数组有一维数组和多维数组。2014-08-08
这篇文章主要介绍了java实现的图片裁剪功能,涉及java针对图片的读取、转换、保存等相关操作技巧,需要的朋友可以参考下2017-10-10
这篇文章主要介绍了JVM的内存回收及常见算法,需要的朋友可以参考下2023-05-05
最新评论