简体   繁体   English

使用Servlet程序以JSP格式显示.gif文件

[英]Displaying .gif file in JSP form using Servlet program

I have written a servlet java program. 我已经编写了一个servlet java程序。

During the execution of one particular loop of the program, I need the a gif file to be displayed in the JSP form indicating that the process is going on. 在程序的一个特定循环的执行过程中,我需要以JSP形式显示一个gif文件,指示该过程正在进行。

I am not aware of implementing the same inside the loop. 我不知道在循环内实现相同的功能。

Kindly advise on how the same has to be done, such that a gif file is displayed in the JSP form and it would be of great use if u can suggest any .gif file for the purpose of processing display. 请就必须做的事情提出建议,以便在JSP表单中显示gif文件,如果您可以建议任何.gif文件来处理显示,这将很有用。 Am a beginner in java. 是Java的初学者。

Thanks in advance 提前致谢

JSP is supposed to output HTML. JSP应该输出HTML。 Images in HTML are to be displayed using <img> tag. HTML中的图像将使用<img>标签显示。 This tag has a src attribute which is supposed to point to a public web resource. 此标记具有src属性,该属性应指向公共Web资源。 Here's an example: 这是一个例子:

<img src="progress.gif">

When opening the JSP page by http://example.com/context/page , this assumes the progress.gif file to be present in http://example.com/context/progress.gif (ie in the root of the public webcontent folder). 通过http://example.com/context/page打开JSP页面时,这假定progress.gif文件位于http://example.com/context/progress.gif中 (即,公众的根目录中) webcontent文件夹)。

Now, you want to display the image only when the submit button is pressed in order to wait for the response to be finished. 现在,您只想在按下提交按钮以等待响应完成时才显示图像。 You can do this by initially hiding the image using CSS and redisplaying it using JavaScript. 为此,您可以先使用CSS隐藏图片,然后使用JavaScript重新显示图片。

HTML: HTML:

<input type="submit" onclick="showProgress()">
<img id="progress" src="progress.gif">

CSS: CSS:

#progress { 
    display: none;
}

JavaScript JavaScript的

function showProgress() {
    document.getElementById('progress').style.display = 'block';
}

When the response is finished, it will refresh the page with the new target page and the progress image will "automatically" disappear. 响应完成后,它将使用新的目标页面刷新页面,并且进度图像将“自动”消失。


Update : here's how the complete JSP file can look like: 更新 :完整的JSP文件如下所示:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Test</title>
        <style>
            #progress { 
                display: none;
            }
        </style>
        <script>
            function showProgress() {
                document.getElementById('progress').style.display = 'block';
            }
        </script>
    </head>
    <body>
        <form>
            <input type="submit" onclick="showProgress()">
            <img id="progress" src="progress.gif">
        </form>
    </body>
</html>

Or when CSS/JS is externalized in its own file (recommended): 或将CSS / JS外部化到其自己的文件中(推荐):

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Test</title>
        <link rel="stylesheet" href="style.css">
        <script src="script.js"></script>
    </head>
    <body>
        <form>
            <input type="submit" onclick="showProgress()">
            <img id="progress" src="progress.gif">
        </form>
    </body>
</html>

See also: 也可以看看:

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM