项目框架采用spring+hibernate+springMVC如果上传文件不想使用flash那么你可以采用HTML5;截图前段模块是bootstarp框架;不废话直接来代码;spring-mvc配置文件;效果截图如下:
详细实现如下:
1、mvc-config.xml
xmlns:xsi="/2001/XMLSchema-instance"
xmlns:context="/schema/context"
xmlns:mvc="/schema/mvc"
xsi:schemaLocation="/schema/beans
/schema/beans/spring-beans.xsd
/schema/context
/schema/context/spring-context-3.2.xsd
/schema/mvc
/schema/mvc/spring-mvc-3.2.xsd">
class="org.springframework.web.servlet.view.InternalResourceViewResolver">
class="org.springframework.http.converter.ByteArrayHttpMessageConverter" />
class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter">
text/plain;charset=UTF-8
2、实体工具类：Progress.Java
package com.yunfang.banks.listener;
public class Progress {
private long pBytesRead;
private long pContentLength;
private long pItems;
public long getpBytesRead() {
return pBytesRead;
}
public void setpBytesRead(long pBytesRead) {
this.pBytesRead = pBytesRead;
}
public long getpContentLength() {
return pContentLength;
}
public void setpContentLength(long pContentLength) {
this.pContentLength = pContentLength;
}
public long getpItems() {
return pItems;
}
public void setpItems(long pItems) {
this.pItems = pItems;
}
@Override
public String toString() {
return "Progress [pBytesRead=" + pBytesRead + ", pContentLength="
+ pContentLength + ", pItems=" + pItems + "]";
}
}
3、文件上传进度监听类：FileUploadProgressListener.java
package com.yunfang.banks.listener;
import javax.servlet.http.HttpSession;
import mons.fileupload.ProgressListener;
import org.ponent;
@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);
}
public void update(long pBytesRead, long pContentLength, int pItems) {
Progress status = (Progress) session.getAttribute("status");
try {
Thread.sleep(5);
} catch (InterruptedException e) {
e.printStackTrace();
}
status.setpBytesRead(pBytesRead);
status.setpContentLength(pContentLength);
status.setpItems(pItems);
//System.out.println(">>>>>>>>>>>>>>>>>>>>"+status);
}
}
4、自定义扩展org.springframework.monsMultipartResolver类，重写public MultipartParsingResult parseRequest(HttpServletRequest request) throws MultipartException方法：
CustomMultipartResolver.java
package com.yunfang.banks.listener;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import mons.fileupload.servlet.ServletFileUpload;
import mons.fileupload.FileItem;
import mons.fileupload.FileUpload;
import mons.fileupload.FileUploadBase;
import mons.fileupload.FileUploadException;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.multipart.MaxUploadSizeExceededException;
import org.springframework.web.multipart.MultipartException;
import org.springframework.monsMultipartResolver;
public class CustomMultipartResolver extends CommonsMultipartResolver {
@Autowired
private FileUploadProgressListener progressListener;
public void setFileUploadProgressListener(
FileUploadProgressListener progressListener) {
this.progressListener = progressListener;
}
@Override
@SuppressWarnings("unchecked")
public MultipartParsingResult parseRequest(HttpServletRequest request)
throws MultipartException {
String encoding = determineEncoding(request);
FileUpload fileUpload = prepareFileUpload(encoding);
progressListener.setSession(request.getSession());
fileUpload.setProgressListener(progressListener);
try {
List 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);
}
}
}
5、uploadController.java
@RequestMapping("UserControllers/progress")
public void uploadFile(HttpServletRequest request,HttpServletResponse response,
@RequestParam("file") CommonsMultipartFile file) throws IOException {
response.setContentType("text/html");
response.setCharacterEncoding("GBK");
PrintWriter out;
boolean flag = false;
if (file.getSize() > 0) {
//文件上传的位置可以自定义
flag = FileUploadUtil.upLoadFile(file, request);
}
out = response.getWriter();
if (flag == true) {
out.print("1");
} else {
out.print("2");
}
}
6、FileUploadUtil.java
import java.io.File;
import javax.servlet.http.HttpServletRequest;
import org.springframework.web.multipart.MultipartFile;
public class FileUploadUtil {
public static Boolean uploadFile(HttpServletRequest request, MultipartFile file) {
System.out.println("开始");
String path = request.getSession().getServletContext().getRealPath("upload");
String fileName = file.getOriginalFilename();
System.out.println(path);
File targetFile = new File(path, fileName);
if (!targetFile.exists()) {
targetFile.mkdirs();
}
// 保存
try {
file.transferTo(targetFile);
return true;
} catch (Exception e) {
e.printStackTrace();
return false;
}
}
}
7、前台页面
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
.file-box {
position: relative;
width: 340px
}
.txt {
height: 22px;
border: 1px solid #cdcdcd;
width: 180px;
vertical-align: middle;
margin: 0;
padding: 0
}
.btn {
border: 1px solid #CDCDCD;
height: 24px;
width: 70px;
vertical-align: middle;
margin: 0;
padding: 0
}
.file {
position: absolute;
top: 0;
right: 80px;
height: 24px;
filter: alpha(opacity : 0);
opacity: 0;
width: 260px;
vertical-align: middle;
margin: 0;
padding: 0
}
function myInterval()
{
$("#progress").html("");
$.ajax({
type: "POST",
url: "UserControllers/getSessions",
data : "1=1",
dataType : "text",
success : function(msg) {
var data = msg;
console.log(data);
$("#pdiv").css("width", data + "%");
$("#progress").html(data + "%");
}
});
}
function autTime() {
setInterval("myInterval()", 200);//1000为1秒钟
}
--%>
function UpladFile() {
var fileObj = document.getElementById("file").files[0]; // js 获取文件对象
var FileController = "UserControllers/progress"; // 接收上传文件的后台地址
// 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() {
alert("上传完成!");
//$('#myModal').modal('hide');
};
//监听progress事件
xhr.upload.addEventListener("progress", progressFunction, false);
xhr.send(form);
}
function progressFunction(evt) {
var progressBar = document.getElementById("progressBar");
var percentageDiv = document.getElementById("percentage");
if (evt.lengthComputable) {
progressBar.max = evt.total;
progressBar.value = evt.loaded;
percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100)
+ "%";
}
}
文件管理
data-target="#myModal">上传
aria-labelledby="myModalLabel" aria-hidden="true">
aria-hidden="true">×
文件上传进度
style="width: 100%;height: 20px; ">
type="file" name="file" class="file" id="file" size="28"
οnchange="document.getElementById('textfield').value=this.value" />
οnclick="UpladFile()" />
关闭
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
