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

最新推荐文章于 2021-12-15 15:02:02 发布

xuewei97

最新推荐文章于 2021-12-15 15:02:02 发布

阅读量1.7k

点赞数

分类专栏： AJAX 文章标签： servlet ajax import upload xmlhttprequest function

AJAX 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

用到了commons-fileupload-1.1.jar和commons-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="提交" οnclick="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实现这个功能。

xuewei97

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
Ajax + Servlet 实现上传文件进度条显示

用到了commons-fileupload-1.1.jar和commons-io-1.2.jar两个包客户端文件upload.jsp My JSP upload.jsp starting page var xmlHttp ; function createXMLHttp(){ if(window.ActiveXObject){
复制链接

扫一扫

专栏目录