`
jeasony
  • 浏览: 199569 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

Ajax + Servlet 实现上传文件进度条显示

    博客分类:
  • ajax
阅读更多

用到了commons-fileupload-1.1.jarcommons-io-1.2.jar两个包
客户端文件upload.jsp
<%@ page language="java" pageEncoding="GBK"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>My JSP 'upload.jsp' starting page</title>
        <script type="text/javascript">
    var xmlHttp ;
    function createXMLHttp(){
        if(window.ActiveXObject){
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        else{
            xmlHttp = new XMLHttpRequest() ;
        }
    }
   
    function ajaxSend(){
        createXMLHttp() ;
        var content = "status" ;
        var url ="upload?status="+content ;
        xmlHttp.onreadystatechange = handler ;
        xmlHttp.open("POST",url,true) ;
        xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xmlHttp.send(url) ;
    }
    function handler(){
     if(xmlHttp.readyState == 4)     {
      if(xmlHttp.status == 200)      {
            var percent = xmlHttp.responseText ;
            var com = document.getElementById("com") ;
            var last = document.getElementById("last") ;
            var p = document.getElementById("percent") ;
            com.setAttribute("width",percent+"%") ;
            last.setAttribute("width",(100-percent)+"%") ;
            if(percent < 99){
                p.innerHTML="已经完成:"+percent+"%" ;
                setTimeout("ajaxSend()",100) ;
            }
            else{
                p.innerHTML="已经全部上传!" ;
            }
      }
     }
     return true;
    }
   
    function mySubmit(form){
        form.action="upload" ;
        form.submit() ;
        ajaxSend()
    }
    </script>
    </head>

    <body>
        <form enctype="multipart/form-data" name="fileform" method="post"
            target="target_upload">
            <input type="file" value="浏览" name="fileUpload" />
            <input type="button" value="提交" onclick="mySubmit(fileform)" />
        </form>
        <div id="status">
            <table width="100%">
                <tbody>
                    <tr>
                        <td>
                            <table width="30%" align="left">
                                <tbody>
                                    <tr>
                                        <td width="0%" bgcolor="green" height="25px" id="com">
                                        </td>
                                        <td width="100%" bgcolor="#CCCCCC" id="last">
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td id="percent" align="center"></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>
Servlet文件MyUpload.java
package zbq.upload;

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.util.Iterator;
import java.util.List;

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.FileItemFactory;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;

public class MyUpload extends HttpServlet {

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        request.setCharacterEncoding("GBK");
        response.setContentType("text; charset=ISO-8859-1");
        if ("status".equalsIgnoreCase(request.getParameter("status"))) {
            status(response);
        } else {
            totalSize = request.getContentLength();
            response.sendRedirect("upload.jsp");
            try {
                upload(request);
            } catch (FileUploadException e) {
                e.printStackTrace();
            }
        }
    }

    private void upload(HttpServletRequest request) throws IOException,
            FileUploadException {

        FileItemFactory factory = new DiskFileItemFactory();
        // 通过该工厂对象创建ServletFileUpload对象
        ServletFileUpload upload = new ServletFileUpload(factory);
        List items = upload.parseRequest(request);
        for (Iterator i = items.iterator(); i.hasNext();) {
            FileItem fileItem = (FileItem) i.next();
            // 如果该FileItem不是表单域
            if (!fileItem.isFormField()) {
                String fileName = fileItem.getName().substring(
                        fileItem.getName().lastIndexOf("\\") + 1);
                File file = new File("C:\\", fileName);
                InputStream in = fileItem.getInputStream();
                FileOutputStream out = new FileOutputStream(file);
                byte[] buffer = new byte[1024]; // To hold file contents
                int n;
                while ((n = in.read(buffer)) != -1) {
                    out.write(buffer, 0, n);
                    completedSize += (long) n;
                }
                fileItem.delete();// 内存中删除该数据流
            }
        }
    }

    private void status(HttpServletResponse response) throws IOException {
        long lastSeconds = (System.currentTimeMillis() - startTime) / 1024;
        int percent = (int) (completedSize * 100 / (totalSize + 0.0001));
        response.getWriter().print(percent);
    }

    private long totalSize = 0L;
    private long completedSize = 0L;
    private long startTime = System.currentTimeMillis();
}
WEB.xml就不用写了吧。
但是在Struts2里边我还很迷糊,它把上传功能给封装了,好是好用,但是不好做上传进度条了。希望能抛砖引玉,各位高手能否做个struts2+ajax实现这个功能。

分享到:
评论

相关推荐

    Ajax + servlet 实现上传进度条显示

    利用Ajax和Servlet实现文件上传,用来commons-fileupload和commons-io两个包。这两个包也在里边。东西做的很简单,但重点是能对这个方法有所了解就行了,有人想做的更炫的可以自行修改。希望能对大家有所帮助。如果...

    关于zhaobq 的Ajax+servlet上传进度条的改进

    感谢zhaobq给我们提供了Ajax+servlet实现上传进度条。但此代码运行时会有一点小问题:1、点上传时会打开另一个IE页面,我采用了一个iframe进行隐藏。2、有时看不见进度条,特别是小文件时,在此我采用了线程sleep,...

    JSP+servlet上传文件有 进度条

    本主题将详细探讨如何在JSP(JavaServer Pages)和Servlet环境下实现文件上传并展示进度条。 首先,我们需要理解JSP和Servlet的基础知识。JSP是一种动态网页技术,允许开发者在HTML代码中嵌入Java代码,服务器端...

    ajax +jsp实现带进度条的文件上传

    "Ajax + JSP 实现带进度条的文件上传"是一个技术性较强的话题,它结合了异步JavaScript和XML(Ajax)技术以及Java服务器页面(JSP)技术,为用户提供了一种无需刷新整个页面即可实现文件上传并展示进度条的效果,极...

    一个基于AJAX+JSP实现的带进度条文件上传源程序代码

    本项目聚焦于一个基于AJAX(异步JavaScript和XML)与JSP(JavaServer Pages)技术实现的带进度条的文件上传系统,提供了一种优化的用户体验,通过实时反馈文件上传进度来提高交互性。 首先,我们需要理解AJAX的核心...

    servlet+jquery实现文件上次进度条

    "servlet+jquery实现文件上传进度条"这个主题正是为了改善这一情况,通过结合Java的Servlet技术和JavaScript的jQuery库,为用户提供了可视化的文件上传进度指示。 Servlet是Java服务器端编程的基础,它在Web应用中...

    使用jQuery ajaxFileUpload+servlet实现文件上传

    在这个场景下,我们将探讨如何结合`jQuery ajaxFileUpload` 和Servlet实现文件上传的功能。 首先,`jQuery ajaxFileUpload` 插件允许用户在不刷新页面的情况下上传文件,提供了一种友好的用户体验。它的主要优点...

    spring+velocity+ajax带进度条上传文件

    "spring+velocity+ajax带进度条上传文件"是一个综合性的技术应用场景,涉及到Spring框架、Velocity模板引擎以及Ajax技术,旨在提供一个用户友好的文件上传体验,其中包括实时的进度条显示。下面将详细解释这些技术...

    java+ajax上传文件带进度条

    在IT行业中,实现文件上传并显示进度条是常见的需求,特别是在Web应用中。这个主题“java+ajax上传文件带进度条”聚焦于使用Java后端和Ajax前端技术来完成这一功能。下面将详细介绍如何实现这一功能,以及涉及的关键...

    ajax版自定义上传文件数量+进度条+JAVA+Servlet

    在现代Web应用中,文件上传是一项常见的功能,而利用AJAX技术实现的异步文件上传不仅可以提高用户体验,还能实现文件上传进度的实时显示。本文将深入讲解如何使用AJAX、JavaScript、Java和Servlet来实现一个自定义的...

    servlet多文件上传(带进度条)

    总的来说,实现Servlet多文件上传(带进度条)涉及的技术包括:Servlet的Part接口、文件流操作、Ajax异步请求、前端的进度条更新以及文件上传的错误处理和安全性措施。通过这些技术的结合,我们可以创建出一个高效且...

    ajax异步文件上传,servlet处理

    为了提供更好的用户体验,开发者通常会采用AJAX(Asynchronous JavaScript and XML)技术实现异步文件上传,避免传统方式下页面刷新带来的中断感。AJAX允许在后台与服务器进行通信,而无需刷新整个页面。本篇文章将...

    基于servlet的简易文件上传(带进度条)

    在本文中,我们将深入探讨如何使用Java的Servlet技术来实现一个简易的文件上传功能,并且在上传过程中添加进度条的显示。Servlet是Java Web开发中不可或缺的一部分,它提供了服务器端处理HTTP请求的能力,使得我们...

    JQuery和Servlet实现上传进度条

    "JQuery和Servlet实现上传进度条"是一个常见的技术方案,它能够显著提升用户对上传过程的感知,提供实时的进度反馈,减少用户的等待焦虑。下面我们将深入探讨这个主题。 首先,JQuery是一个流行的JavaScript库,它...

    Servlet上传文件并显示进度条

    "Servlet上传文件并显示进度条"这个主题涵盖了如何在用户上传大文件时提供实时进度反馈,以增强用户体验。在这个过程中,我们需要处理以下几个核心知识点: 1. **Multipart解析器**:Servlet 3.0及以上版本引入了...

    AJAX+JSP实现基于WEB的文件上传的进度控制

    在AJAX+JSP实现文件上传时,首先需要一个HTML表单让用户选择要上传的文件。通过JavaScript监听表单提交事件,阻止其默认行为,然后使用XMLHttpRequest对象创建HTTP请求,将文件数据以二进制流形式发送到服务器。 四...

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

    在这个案例中,JSP页面将展示文件上传表单,处理用户交互,并通过DWR调用后台Servlet实现文件上传。 4. **Ajax(Asynchronous JavaScript and XML)**: Ajax是异步JavaScript和XML的缩写,尽管现在XML在实际应用...

    servlet+jquery实现文件上传进度条示例代码

    ### Servlet与jQuery实现文件上传进度条的示例代码 在现代Web应用中,文件上传功能是不可或缺的。尤其是大文件上传,如果缺少上传进度反馈,用户可能因无法预知上传进度而感到不安。本文将介绍如何使用Servlet与...

    【Demo Project】ajaxSubmit+Servlet表单文件上传和下载

    【AjaxSubmit+Servlet实现表单文件上传与下载详解】 在Web开发中,文件上传和下载是常见的功能,尤其是在用户交互丰富的应用中。本项目【Demo Project】利用AjaxSubmit结合Servlet技术,提供了一种高效、异步的方式...

Global site tag (gtag.js) - Google Analytics