在文件下载响应时重新启用表单提交按钮 [英] Reenable a form submit button on response of a file download

问题描述

这可能是一个非常简单的问题，但实际上我没有看到很多搜索结果。

This is probably a really easy question, but I actually haven't seen many search results on this.

我在表单中有一个非常基本的提交按钮，接受用户输入，并在服务器的temp目录中生成一个可下载文件，然后提示用户下载该文件，然后在提交时将其禁用：

I have a very basic submit button within a form that takes some user input, and generates a downloadable file in the server's temp directory, then prompts the user to download this file, which is then disabled by this on submit:

<form action="Home" method="post" onsubmit="Submit.disabled = true; return true;">
...
<input type="submit" name="Submit" value="Submit" id="Submit" />

在页面创建文件时，我们需要禁用它几秒钟，然后提示用户下载它。创建文件后，它将在我们的SelectionServlet.java中返回以下响应，以便浏览器可以下载此生成的文件，例如：

We need it to be disabled for a few seconds while the page creates the file then prompts the user to download it. Once the file has been created, it gives the following response back in our SelectionServlet.java so the browser can download this generated file such as:

            if (Export.equals("PDF")){
                response.setContentType(".pdf");
                response.setHeader("Content-disposition", "attachment; filename="+Constants.FILE_NAME+".pdf");
                File dlFile = new File(Constants.FILE_LOCATION+".pdf");

                 // This should send the file to browser
                 OutputStream outStream = response.getOutputStream();
                 FileInputStream in = new FileInputStream(dlFile);
                 byte[] buffer = new byte[4096];
                 int length;
                 while ((length = in.read(buffer)) > 0){
                    outStream.write(buffer, 0, length);
                 }
                 in.close();
                 outStream.flush();
                 Export="HTML";
            }

准备好文件下载后，我想重新启用提交按钮，以便用户可以重复使用输入的表单数据（不进行页面重定向，因为用户基本上只是选择要构建的文件中包含什么条件，以及文件的类型是提交按钮最终将我们带到一个Java Web连接，该Web连接连接到源并在用户要下载的服务器的temp目录中构建各种文件类型。）

After the file is ready to be downloaded, I'd like to re-enable that Submit button so the user can re-use the form data they put in (no page redirection was done, as the user basically just selects what criteria goes into the file they're building, and what file type it is, the Submit button just ultimately brings us to a java web connection that connects to a source and builds various file types into the temp dir of the server to be downloaded by the user).

我在Chrome中玩过游戏，实际上可以删除提交按钮上的禁用属性，然后再次单击按钮，但使用不同的条件，并获得不同的结果。我不确定什么代码可以真正做到这一点。

I have played around in Chrome, and I can actually remove the disabled attribute on the submit button, then click the button again but with different criteria and get a different result back. What code can actually do this, I'm not sure.

推荐答案

在文件下载响应中设置cookie，然后让JavaScript定期检查Cookie。一旦文件下载准备好提供服务，并且因此发生了另存为对话框，那么cookie将可用于JavaScript。为了确保在同一会话中跨多个浏览器窗口/选项卡正常工作，最好的方法是在JavaScript中生成唯一的令牌，将其作为请求参数传递给下载请求，然后让servlet将其设置为cookie值。

Set a cookie on the response of the file download and let JavaScript check for the cookie on intervals. Once the file download is ready to be served and thus the Save As dialog thing is happening, then the cookie will be available to JavaScript. To ensure proper working across multiple browser windows/tabs in the same session, best is to generate an unique token in JavaScript, pass it as request parameter along to the download request and let the servlet set it as cookie value.

基本上应该这样做：

<form action="Home" method="post" onsubmit="startDownload(this)">
   ...
   <input type="hidden" name="token" />
   <input type="submit" name="Submit" value="Submit" id="Submit" /> <!-- I'd rather rename and lowercase the ID/name. -->
</form>

使用此JavaScript（使用jQuery时， jquery-cookie插件可能有助于减少 document.cookie 冗长）：

With this JavaScript (when using jQuery, the jquery-cookie plugin may be helpful to reduce document.cookie verbosity):

function startDownload(form) {
    var token = new Date().getTime();
    form.token.value = token;
    form.Submit.disabled = true;

    var pollDownload = setInterval(function() {
        if (document.cookie.indexOf("download=" + token) > -1) {
            document.cookie = "download=" + token + "; expires=" + new Date(0).toGMTString() + "; path=/";
            form.Submit.disabled = false;
            clearInterval(pollDownload);
        }
    }, 500);
}

在servlet中：

// Prepare download here.
// ...

// Once finished preparing, set cookie.
Cookie cookie = new Cookie("download", request.getParameter("token"));
cookie.setPath("/");
response.addCookie(cookie);

// Now stream download to response.
// ...

这篇关于在文件下载响应时重新启用表单提交按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！