`
zeng7960983
  • 浏览: 44438 次
  • 性别: Icon_minigender_1
  • 来自: 邵阳
社区版块
存档分类
最新评论

java ajax 上传 加进度条

    博客分类:
  • java
阅读更多
项目中要用到上传.同时要有进度条提示 从网上找了些解决方案自己学习了下.做个总结:
上传过程中使用到的是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的请求路径进行过滤.

好了总结完毕

分享到:
评论
2 楼 zeng7960983 2013-02-25  
zhubo123 写道
你好. setProgressListener()这个方法为什么不存在啊. 你有这个jar包吗? ,,麻烦了. 邮箱: zhubox1j7253@sina.com    有的话十分感谢

jar直接网上搜索 注意jar的版本
1 楼 zhubo123 2012-06-10  
你好. setProgressListener()这个方法为什么不存在啊. 你有这个jar包吗? ,,麻烦了. 邮箱: zhubox1j7253@sina.com    有的话十分感谢

相关推荐

    java 和ajax编写带进度条的附件上传

    "Java和Ajax编写带进度条的附件上传"是一个常见的需求,它旨在提供一个更友好的用户体验,让用户在上传大文件时能实时看到上传进度,而不是盲目等待。下面将详细阐述这个主题涉及的知识点。 首先,Java通常作为...

    Java 文件上传带进度条源码

    使用JavaScript或jQuery监听表单的提交事件,以便在文件上传前发送Ajax请求,开启进度条显示。 2. **后端处理**:在Java Servlet中,重写`doPost()`方法,使用`Part`接口处理每个上传的文件。可以计算每个Part的...

    ajax上传文件进度条及springMVC上传

    1. **Ajax上传文件**: 在前端,我们可以使用XMLHttpRequest对象或者jQuery的Ajax方法来实现文件的异步上传。创建一个`&lt;input type="file"&gt;`元素供用户选择文件,然后监听其`change`事件。当用户选择文件后,读取...

    java使用ajax实现进度条

    ### Java使用Ajax实现进度条详解 在Web应用开发过程中,为用户提供实时的文件上传或处理状态反馈至关重要。本文将详细探讨如何使用Java结合Ajax技术来实现实时的进度条显示功能,以提升用户体验。 #### 一、理解...

    java实现大文件上传并有进度条及其代码解析

    本文将详细介绍如何使用Java实现大文件的上传并展示进度条,同时解析相关的代码实现。 1. **大文件分块上传** 大文件上传的关键在于避免一次性加载整个文件到内存,因为这可能导致内存溢出。Java中,我们可以使用`...

    java写的带进度条的Ajax多文件上传

    本项目关注的是“java写的带进度条的Ajax多文件上传”,这是一个优化过的实现,旨在提供简洁、直观的用户体验,允许用户实时查看上传进度并监控上传速度。 1. **DWR(Direct Web Remoting)**: DWR是一种Java库,...

    java+ajax带进度条的上传

    在本项目"java+ajax带进度条的上传"中,我们探讨的是如何结合这两种技术实现一个文件上传功能,并且在上传过程中展示进度条,提升用户体验。 首先,Java作为服务器端编程语言,主要负责处理业务逻辑和数据存储。在...

    java+ajax上传文件带进度条

    这个主题“java+ajax上传文件带进度条”聚焦于使用Java后端和Ajax前端技术来完成这一功能。下面将详细介绍如何实现这一功能,以及涉及的关键知识点。 **1. 前端部分(Ajax)** Ajax(Asynchronous JavaScript and ...

    ssh2(struts2+spring2.5+hibernate3.3+ajax)带进度条文件上传(封装成标签

    在这个项目中,SSH2框架与Ajax技术结合,实现了一个带进度条的文件上传功能,并且这个功能已经被封装成了自定义标签,方便在页面上直接使用。 首先,让我们深入理解SSH框架的每个组件: 1. **Struts2**:Struts2是...

    java文件上传带进度条

    Java 文件上传带进度条的功能是通过结合Ajax技术与Struts2框架中的ProgressListener接口来实现的,以便在用户界面实时展示文件上传的进度。以下是详细的知识点解释: 1. **Ajax 进度查询机制**: - 在客户端,使用...

    java ajax上传文件并显示进度条

    在现代Web应用中,用户对交互性和实时反馈的需求日益增强,这就催生了“java ajax上传文件并显示进度条”的技术。Ajax(Asynchronous JavaScript and XML)是一种创建动态网页的技术,它允许页面在不重新加载整个...

    Java中使用Ajax、Jquery带进度条文件上传.

    以上就是使用Ajax、jQuery和Java实现带进度条的文件上传功能的基本步骤。在实际开发中,你可能还需要处理更多细节,如错误处理、多文件上传、断点续传等。记得在项目中添加合适的测试用例,确保功能的稳定性和安全性...

    jsp中使用ajax实现web进度条

    "jsp中使用ajax实现web进度条"这个主题就是关于如何在Java Server Pages (JSP)中利用Asynchronous JavaScript and XML (AJAX)技术来创建一个动态显示文件上传进度的组件。下面将详细介绍这一过程中的关键知识点。 1...

    struts2+ajax文件进度条的实现

    总的来说,"struts2+ajax文件进度条的实现"是一个典型的前后端协同工作的示例,它展示了如何在Java web应用中优化用户体验,特别是在处理大文件上传时。通过理解Ajax的工作原理、Struts2的文件上传机制以及前端组件...

    java图片上传进度条

    在Java编程中,实现图片上传进度条功能是一项常见的需求,特别是在构建Web应用或者移动应用时。这个功能可以提供用户友好的界面,展示文件上传过程,提高用户体验。在本篇文章中,我们将深入探讨如何在Java环境下,...

    ajax文件上传进度条

    为了提供更好的用户体验,引入了Ajax文件上传和进度条功能。这个话题主要涵盖了如何使用jQuery库和Apache的FileUpload组件来创建一个动态的、实时显示上传进度的界面。 **jQuery** 是一个流行的JavaScript库,它...

    commons-fileupload-1.2.1 ajax上传(进度条)

    "commons-fileupload-1.2.1 ajax上传(进度条)"这个主题涉及了两个核心技术:Apache Commons FileUpload库的使用以及通过AJAX实现的文件上传进度条功能。 Apache Commons FileUpload是一个Java库,专门设计用于...

    extjs java 上传文件进度条

    总结来说,"extjs java 上传文件进度条"这个主题涉及到前端与后端的交互,需要理解ExtJS组件的使用,熟悉Ajax异步上传,掌握Java服务器处理文件上传的逻辑,以及HTTP协议、JSON通信等相关知识。通过这些技术的结合,...

    Java文件上传带进度条的

    综上所述,"Java文件上传带进度条"的实现涉及了Java Servlet技术、多部分表单数据解析、jQuery的AJAX与进度条控制等多个方面,通过前后端协同工作,实现了文件的高效安全上传并提供了友好的用户界面。这个项目不仅...

    java,jsp,ajax进度条(jsp)

    本项目"java,jsp,ajax进度条(jsp)"结合了这三种技术,旨在实现一个功能强大的进度条,用于监控大文件的上传或下载过程,提升用户体验。 首先,让我们深入理解这三个技术的基础概念: 1. **Java**:Java是一种跨...

Global site tag (gtag.js) - Google Analytics