在 Chrome 中使用 jQuery UI 进度条和 ajax 时的奇怪行为

Question

最近我正在尝试使用 ajax 的 jQuery UI 进度条来构建文件上传进度条。

它在 IE 和 firefox 中的作用就像是魅力，但在 Chrome 中的行为很奇怪，这让我觉得我在编码部分做错了什么。

我的设计是循环 ajax 函数来检索从 servlet 读取的上传字节，它可以在 IE 和 firefox 中使用。

但是，在 Chrome 中运行时，ajax 函数只能检索一次读取的上传字节，也就是第一次循环成功。

在Chrome浏览器的左下角，上传百分比计数器显示上传仍在运行，这让我认为问题与ajax调用有关。

我尝试从 ajax 打印错误消息，但结果没有错误消息。

请在下面找到我的源代码：

ajax：

       function doProgressLoop() {
            setTimeout("getProgress()", 1500);
            setTimeout("doProgressLoop()", 2000);
        }

        function getProgress() {
            jQuery.ajax({
                type: "POST",
                url: "/processUpload",
                dataType: "text",
                data: "",
                success: function(data) {
                    console.log(data);
                    if(data != "null" && parseInt(data) < 100) {
                        progressbar.progressbar("value", parseInt(data));
                    }
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    alert(textStatus + ": " + errorThrown);
                    console.log(textStatus + ": " + errorThrown);
                }
            });
        }

        function fSubmit() {
            jQuery("#submit").attr("disabled", "disabled");
            progressbar.show();
            doProgressLoop();
            setTimeout("jQuery('#hiddenSubmit').click()", 2000);
        }

小服务程序：

public void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException {

        response.setContentType("text/html");
        response.setHeader("Cache-Control", "no-cache");
        PrintWriter out = response.getWriter();

        HttpSession session = request.getSession(true);

        if (session == null) {
            System.out.println("HTTPSession is null");
            out.println("HTTPSession: null");
            return;
        }

        ProgressEntity entity = (ProgressEntity) session.getAttribute("upload_file");

        if(entity == null) {
            logger.info("entity is null");
            out.println("null");
        } else {
            logger.info("entity: " + entity.getPercentDone());
            out.println(String.valueOf(entity.getPercentDone()));
        }

    }

进度监听器：

public class UploadProgressListener implements ProgressListener {

private HttpSession session;
private int percentDone = 0;
private long bytesRead;
private long contentLength;
private int items;

private static final Logger logger = Logger.getLogger(UploadProgressListener.class);

public UploadProgressListener(HttpSession session) {
    this.session = session;
    ProgressEntity entity = new ProgressEntity();
    session.setAttribute("upload_file", entity);
}

public void update(long bytesRead, long contentLength, int items) {

    ProgressEntity entity = (ProgressEntity) session.getAttribute("upload_file");

    entity.setBytesRead(bytesRead);
    entity.setContentLength(contentLength);
    entity.setItems(items);

    session.setAttribute("upload_file", entity);

    this.bytesRead = bytesRead;
    this.contentLength = contentLength;
    this.items = items;

}

public long getBytesRead() {
    return this.bytesRead;
}

}

多部分解析器：

public class ProgressUploadMultipartResolver extends CommonsMultipartResolver {

private HttpServletRequest request;
private static final Logger logger = Logger.getLogger(ProgressUploadMultipartResolver.class);

protected FileUpload newFileUpload(FileItemFactory fileItemFactory) {

    ServletFileUpload upload = new ServletFileUpload(fileItemFactory);
    upload.setSizeMax(-1);

    if(request != null) {
        HttpSession session = request.getSession();
        UploadProgressListener uploadProgressListener = new UploadProgressListener(session);
        upload.setProgressListener(uploadProgressListener);
    }

    return upload;
}

@Override
public MultipartHttpServletRequest resolveMultipart (HttpServletRequest request) throws MultipartException {
    this.request = request;
    return super.resolveMultipart(request);
}

@Override
public MultipartParsingResult parseRequest(HttpServletRequest request) throws MultipartException {
    HttpSession session = request.getSession();

    String encoding = "utf-8";
    FileUpload fileUpload = prepareFileUpload(encoding);

    UploadProgressListener uploadProgressListener = new UploadProgressListener(session);
    fileUpload.setProgressListener(uploadProgressListener);
    try {

        List<FileItem> fileItems = ((ServletFileUpload) fileUpload).parseRequest(request);
        return parseFileItems(fileItems, encoding);

    } catch(FileUploadBase.SizeLimitExceededException e) {
        e.printStackTrace();
    } catch (FileUploadException e) {
        e.printStackTrace();
    }

    return null;
}

}

进度信息：

public class ProgressEntity {

private long bytesRead = 0L;
private long contentLength = 0L;
private int items;

public long getBytesRead() {
    return bytesRead;
}
public void setBytesRead(long bytesRead) {
    this.bytesRead = bytesRead;
}
public long getContentLength() {
    return contentLength;
}
public void setContentLength(long contentLength) {
    this.contentLength = contentLength;
}
public int getItems() {
    return items;
}
public void setItems(int items) {
    this.items = items;
}

}

如果您需要我提供更多源代码，请告诉我。

非常感谢！

更新：

请在 Javascript 函数上方找到进度条。

点击提交按钮时会调用fSubmit()函数。

更新 2：

还添加了其他 java 代码。

Answer 1

由于没有人可以提出合适的答案（也许我的问题太奇怪了？？），

在这里，我想回答我自己的问题，关于我最终是如何完成的，

因此，如果有人遇到类似问题，他们将有一种可能的解决方案来尝试。

答案很简单，

我在jsp中创建了一个iframe，并将表单的目标设置为那个iframe，

然后 Chrome 中的进度条就像魅力一样工作。

我对 ajax 和 jQuery 领域真的太陌生了，所以我不知道为什么一个 iframe 就可以解决这个困扰我一周的问题......

虽然我必须处理另一个问题，因为端点 jsp 现在显示在 iframe 中而不是父页面中，但至少进度条在所有常见浏览器中都有效，重定向问题是另一个需要解决的谜团明天……

无论如何希望遇到这个问题的人可以试试这个方法，祝你好运。