Question

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

它在IE和Firefox中的功能就像魅力一样，但Chrome中的行为非常奇怪，这让我觉得我在编码部分做错了。

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

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

enter image description here

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

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

enter image description here

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

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);
        }

的Servlet

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()));
        }

    }

ProgressListener：

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;
}

}

MultipartResolver：

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（）函数。

UPDATE2：

其他java代码也被添加。

Answer 1

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

在这里，我想回答一下我最终如何完成它的问题，

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

答案很简单，

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

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

我真的对ajax和jQuery这个领域太新了所以我不知道为什么只有一个iframe会解决这个让我困扰一周的问题......

虽然我必须处理另一个问题，因为结束点jsp现在显示在iframe而不是父页面中，至少进度条适用于所有常见的浏览器，重定向问题是另一个要解决的问题。明天......

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

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

1 个答案: