项目中要用到上传.同时要有进度条提示 从网上找了些解决方案自己学习了下.做个总结:
上传过程中使用到的是commons-fileupload-1.2.1.jar和commons-io-1.4.jar
上传页面中有一个form表单设置enctype="multipart/form-data" 同时放置一个隐藏的iframe同时设置表单的target为iframe的名称.从而达到伪ajax提交。
进度条：我们在上传的时候监听上传流的长度 实现ProgressListener接口重写update方法该方法有三个参数第一个是已上传文件的流的长度,第二个参数是文件的长度,第三个是文件数.把数据封装起来保存到session中然后用js访问servlet从session取得数据同时设置div的宽度加上css就能够实现进度条功能 代码在下面
页面很简单:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>上传进度条</title>
<script type="text/javascript" src="./js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="./js/progressBar.js"></script>
<link type="text/css" rel="stylesheet" href="./css/progressBar.css">
</head>
<body>
<iframe id='target_upload' name='target_upload' src=''
style='display: none'></iframe>
<form action="./upload" id="uploadForm" enctype="multipart/form-data" method="post" target="target_upload">
<input type="file" name="upload"> <input type="button" id="subButton" value="上传">
</form>
<div id="progress">
<div id="title"><span id="text">上传进度</span><div id="close">X</div></div>
<div id="progressBar">
<div id="uploaded"></div>
</div>
<div id="info"></div>
</div>
</body>
</html>
--------------------------
progressBar.js
var startTime;
$(document).ready(function () {
$("#subButton").click(function () {
var myDate = new Date();
startTime = myDate.getTime();
$(this).attr("disabled", true);
$("#uploadForm").submit();
$("#progress").show();
window.setTimeout("getProgressBar()", 1000);
});
$("#close").click(function(){$("#progress").hide();});
});
function getProgressBar() {
var timestamp = (new Date()).valueOf();
var bytesReadToShow = 0;
var contentLengthToShow = 0;
var bytesReadGtMB = 0;
var contentLengthGtMB = 0;
$.getJSON("/filesystem/getBar", {"t":timestamp}, function (json) {
var bytesRead = (json.pBytesRead / 1024).toString();
if (bytesRead > 1024) {
bytesReadToShow = (bytesRead / 1024).toString();
bytesReadGtMB = 1;
}else{
bytesReadToShow = bytesRead.toString();
}
var contentLength = (json.pContentLength / 1024).toString();
if (contentLength > 1024) {
contentLengthToShow = (contentLength / 1024).toString();
contentLengthGtMB = 1;
}else{
contentLengthToShow= contentLength.toString();
}
bytesReadToShow = bytesReadToShow.substring(0, bytesReadToShow.lastIndexOf(".") + 3);
contentLengthToShow = contentLengthToShow.substring(0, contentLengthToShow.lastIndexOf(".") + 3);
if (bytesRead == contentLength) {
$("#close").show();
$("#uploaded").css("width", "300px");
if (contentLengthGtMB == 0) {
$("div#info").html("\u4e0a\u4f20\u5b8c\u6210\uff01\u603b\u5171\u5927\u5c0f" + contentLengthToShow + "KB.\u5b8c\u6210100%");
} else {
$("div#info").html("\u4e0a\u4f20\u5b8c\u6210\uff01\u603b\u5171\u5927\u5c0f" + contentLengthToShow + "MB.\u5b8c\u6210100%");
}
window.clearTimeout(interval);
$("#subButton").attr("disabled", false);
} else {
var pastTimeBySec = (new Date().getTime() - startTime) / 1000;
var sp = (bytesRead / pastTimeBySec).toString();
var speed = sp.substring(0, sp.lastIndexOf(".") + 3);
var percent = Math.floor((bytesRead / contentLength) * 100) + "%";
$("#uploaded").css("width", percent);
if (bytesReadGtMB == 0 && contentLengthGtMB == 0) {
$("div#info").html("\u4e0a\u4f20\u901f\u5ea6:" + speed + "KB/Sec,\u5df2\u7ecf\u8bfb\u53d6" + bytesReadToShow + "KB,\u603b\u5171\u5927\u5c0f" + contentLengthToShow + "KB.\u5b8c\u6210" + percent);
} else {
if (bytesReadGtMB == 0 && contentLengthGtMB == 1) {
$("div#info").html("\u4e0a\u4f20\u901f\u5ea6:" + speed + "KB/Sec,\u5df2\u7ecf\u8bfb\u53d6" + bytesReadToShow + "KB,\u603b\u5171\u5927\u5c0f" + contentLengthToShow + "MB.\u5b8c\u6210" + percent);
} else {
if (bytesReadGtMB == 1 && contentLengthGtMB == 1) {
$("div#info").html("\u4e0a\u4f20\u901f\u5ea6:" + speed + "KB/Sec,\u5df2\u7ecf\u8bfb\u53d6" + bytesReadToShow + "MB,\u603b\u5171\u5927\u5c0f" + contentLengthToShow + "MB.\u5b8c\u6210" + percent);
}
}
}
}
});
var interval = window.setTimeout("getProgressBar()", 500);
}
-----------------
css
body{font-size:14px;}
#progress{left:400px;top:200px;position:absolute;width:400px;height:120px;border:1px solid black;display:none;}
#progressBar{border:1px solid black;width:300px;height:20px;margin-left:50px;margin-top:60px;}
#uploaded{height:20px;width:1px;background-color:red;}
#title{height:20px;background-color:blue;pading:-10px;}
#close{width:10px;height:10px;right:1px;top:0px;position:absolute;display:none;cursor:pointer;}
---------------
上传处理servlet
package com.dynastarter.sc.file.utils;
import java.io.File;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.util.Iterator;
import java.util.List;
import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
public class uploadServlet extends HttpServlet {
/**
*
*/
private static final long serialVersionUID = 1L;
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
// TODO Auto-generated method stub
this.doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
DiskFileItemFactory factory = new DiskFileItemFactory();
factory.setSizeThreshold(2048*1024);
myProgressListener getBarListener = new myProgressListener(req);
ServletFileUpload upload = new ServletFileUpload(factory);
upload.setProgressListener(getBarListener);
try {
List formList = upload.parseRequest(req);
System.out.println("============="+formList.size());
Iterator<Object> formItem = formList.iterator();
// 将进度监听器加载进去
while (formItem.hasNext()) {
FileItem item = (FileItem) formItem.next();
if (item.isFormField()) {
System.out.println("Field Name:" + item.getFieldName());
} else {
String fileName = item.getName().substring(item.getName().lastIndexOf("\\")+1);
File file = new File("e:\\"+ fileName);
System.out.println("e:\\" + fileName);
OutputStream out = item.getOutputStream();
InputStream in = item.getInputStream();
req.getSession().setAttribute("outPutStream", out);
req.getSession().setAttribute("inPutStream", in);
item.write(file);
}
}
} catch (FileUploadException e2) {
// TODO Auto-generated catch block
e2.printStackTrace();
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
@Override
public void init(ServletConfig config) throws ServletException {
// TODO Auto-generated method stub
super.init(config);
}
}
---------------
进度监听器
package com.dynastarter.sc.file.utils;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
import org.apache.commons.fileupload.ProgressListener;
import com.dynastarter.sc.file.po.fileUploadStatus;
public class myProgressListener implements ProgressListener {
private HttpSession session;
public myProgressListener(HttpServletRequest req) {
session=req.getSession();
fileUploadStatus status = new fileUploadStatus();
session.setAttribute("status", status);
}
/* pBytesRead 到目前为止读取文件的比特数
* pContentLength 文件总大小
* pItems 目前正在读取第几个文件
*/
public void update(long pBytesRead, long pContentLength, int pItems) {
// TODO Auto-generated method stub
fileUploadStatus status = (fileUploadStatus) session.getAttribute("status");
System.out.println(pBytesRead);
System.out.println(pContentLength);
status.setPBytesRead(pBytesRead);
status.setPContentLength(pContentLength);
status.setPItems(pItems);
}
}
----------------
处理进度serlvet
package com.dynastarter.sc.file.utils;
import java.io.IOException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import com.dynastarter.sc.file.po.fileUploadStatus;
public class progressServlet extends HttpServlet {
/**
*
*/
private static final long serialVersionUID = 1L;
public void doPost(HttpServletRequest request, HttpServletResponse response) {
HttpSession session = request.getSession();
fileUploadStatus status = (fileUploadStatus) session.getAttribute("status");
try {
if(status!=null){
response.reset();
response.getWriter().write("{\"pBytesRead\":"
+status.getPBytesRead()+",\"pContentLength\":"+status.getPContentLength()+"}");
System.out.println("{\"pBytesRead\":"
+status.getPBytesRead()+",\"pContentLength\":"+status.getPContentLength()+"}");
}
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
public void doGet(HttpServletRequest request, HttpServletResponse response) {
this.doPost(request,response);
}
}
--------------
web.xml
<servlet>
<servlet-name>upload</servlet-name>
<servlet-class>com.dynastarter.sc.file.utils.uploadServlet</servlet-class>
</servlet>
<servlet>
<servlet-name>progressServlet</servlet-name>
<servlet-class>com.dynastarter.sc.file.utils.progressServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>upload</servlet-name>
<url-pattern>/upload</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>progressServlet</servlet-name>
<url-pattern>/getBar</url-pattern>
</servlet-mapping>
---------------------------
注意点如果系统中集成了struts2 或者spring security 请注意会uploadservlet的req会有点问题如果struts2的filter会把请求进行处理后封装的httpservletrequest传个servlet进行处理这样会得不到原始的请求 uploadservlet下面的处理会有问题
所有最好是把struts2的filter访问路径设置为*.do.如果有spring security则把两个servlet的请求路径进行过滤.
好了总结完毕
分享到：
相关推荐
"Java和Ajax编写带进度条的附件上传"是一个常见的需求，它旨在提供一个更友好的用户体验，让用户在上传大文件时能实时看到上传进度，而不是盲目等待。下面将详细阐述这个主题涉及的知识点。 首先，Java通常作为...
使用JavaScript或jQuery监听表单的提交事件，以便在文件上传前发送Ajax请求，开启进度条显示。 2. **后端处理**：在Java Servlet中，重写`doPost()`方法，使用`Part`接口处理每个上传的文件。可以计算每个Part的...
1. **Ajax上传文件**： 在前端，我们可以使用XMLHttpRequest对象或者jQuery的Ajax方法来实现文件的异步上传。创建一个`<input type="file">`元素供用户选择文件，然后监听其`change`事件。当用户选择文件后，读取...
### Java使用Ajax实现进度条详解 在Web应用开发过程中，为用户提供实时的文件上传或处理状态反馈至关重要。本文将详细探讨如何使用Java结合Ajax技术来实现实时的进度条显示功能，以提升用户体验。 #### 一、理解...
本文将详细介绍如何使用Java实现大文件的上传并展示进度条，同时解析相关的代码实现。 1. **大文件分块上传** 大文件上传的关键在于避免一次性加载整个文件到内存，因为这可能导致内存溢出。Java中，我们可以使用`...
本项目关注的是“java写的带进度条的Ajax多文件上传”，这是一个优化过的实现，旨在提供简洁、直观的用户体验，允许用户实时查看上传进度并监控上传速度。 1. **DWR（Direct Web Remoting）**： DWR是一种Java库，...
在本项目"java+ajax带进度条的上传"中，我们探讨的是如何结合这两种技术实现一个文件上传功能，并且在上传过程中展示进度条，提升用户体验。 首先，Java作为服务器端编程语言，主要负责处理业务逻辑和数据存储。在...
这个主题“java+ajax上传文件带进度条”聚焦于使用Java后端和Ajax前端技术来完成这一功能。下面将详细介绍如何实现这一功能，以及涉及的关键知识点。 **1. 前端部分（Ajax）** Ajax（Asynchronous JavaScript and ...
在这个项目中，SSH2框架与Ajax技术结合，实现了一个带进度条的文件上传功能，并且这个功能已经被封装成了自定义标签，方便在页面上直接使用。 首先，让我们深入理解SSH框架的每个组件： 1. **Struts2**：Struts2是...
Java 文件上传带进度条的功能是通过结合Ajax技术与Struts2框架中的ProgressListener接口来实现的，以便在用户界面实时展示文件上传的进度。以下是详细的知识点解释： 1. **Ajax 进度查询机制**： - 在客户端，使用...
在现代Web应用中，用户对交互性和实时反馈的需求日益增强，这就催生了“java ajax上传文件并显示进度条”的技术。Ajax（Asynchronous JavaScript and XML）是一种创建动态网页的技术，它允许页面在不重新加载整个...
以上就是使用Ajax、jQuery和Java实现带进度条的文件上传功能的基本步骤。在实际开发中，你可能还需要处理更多细节，如错误处理、多文件上传、断点续传等。记得在项目中添加合适的测试用例，确保功能的稳定性和安全性...
"jsp中使用ajax实现web进度条"这个主题就是关于如何在Java Server Pages (JSP)中利用Asynchronous JavaScript and XML (AJAX)技术来创建一个动态显示文件上传进度的组件。下面将详细介绍这一过程中的关键知识点。 1...
总的来说，"struts2+ajax文件进度条的实现"是一个典型的前后端协同工作的示例，它展示了如何在Java web应用中优化用户体验，特别是在处理大文件上传时。通过理解Ajax的工作原理、Struts2的文件上传机制以及前端组件...
在Java编程中，实现图片上传进度条功能是一项常见的需求，特别是在构建Web应用或者移动应用时。这个功能可以提供用户友好的界面，展示文件上传过程，提高用户体验。在本篇文章中，我们将深入探讨如何在Java环境下，...
为了提供更好的用户体验，引入了Ajax文件上传和进度条功能。这个话题主要涵盖了如何使用jQuery库和Apache的FileUpload组件来创建一个动态的、实时显示上传进度的界面。 **jQuery** 是一个流行的JavaScript库，它...
"commons-fileupload-1.2.1 ajax上传（进度条）"这个主题涉及了两个核心技术：Apache Commons FileUpload库的使用以及通过AJAX实现的文件上传进度条功能。 Apache Commons FileUpload是一个Java库，专门设计用于...
总结来说，"extjs java 上传文件进度条"这个主题涉及到前端与后端的交互，需要理解ExtJS组件的使用，熟悉Ajax异步上传，掌握Java服务器处理文件上传的逻辑，以及HTTP协议、JSON通信等相关知识。通过这些技术的结合，...
综上所述，"Java文件上传带进度条"的实现涉及了Java Servlet技术、多部分表单数据解析、jQuery的AJAX与进度条控制等多个方面，通过前后端协同工作，实现了文件的高效安全上传并提供了友好的用户界面。这个项目不仅...
本项目"java,jsp,ajax进度条（jsp）"结合了这三种技术，旨在实现一个功能强大的进度条，用于监控大文件的上传或下载过程，提升用户体验。 首先，让我们深入理解这三个技术的基础概念： 1. **Java**：Java是一种跨...