上传的图片只有在刷新页面后才可用 [英] Uploaded image only available after refreshing the page

问题描述

当我上传图片时，文件保存成功，路径设置成功.但是上传的图片在表单提交后不会立即显示.只有当我重新加载页面时，才会显示上传的图片.

我将上传的文件保存如下:

InputStream 是；尝试 {File file = new File("C:\****\*****\Documents\NetBeansProjects\EventsCalendary\web\resources\images\uploadPhoto.png");is = event.getFile().getInputstream();OutputStream os = new FileOutputStream(file);setUserPhoto("\EventsCalendary\resources\images\"+file.getName());字节 buf[] = 新字节 [1024];内里；while ((len = is.read(buf)) > 0) {os.write(buf, 0, len);}os.close();is.close();} catch (IOException ex) {System.out.println(ex.getStackTrace());}

为什么上传的图片只有在重新加载页面后才显示，我该如何解决?

解决方案

您将文件直接写入 IDE 的项目文件夹，而您的意图似乎是将文件保存在 web 应用程序的部署文件夹中.这是一个坏主意，主要有以下 3 个原因:

1. IDE 项目文件夹中的更改不会立即反映在服务器的工作文件夹中.IDE 中有一种后台作业，它负责使服务器的工作文件夹与上次更新同步(这在 IDE 术语中称为发布").这是您所看到问题的主要原因.

2. 在现实世界的代码中，在某些情况下，将上传的文件存储在 web 应用程序的部署文件夹中根本不起作用.一些服务器(默认或通过配置)不会将部署的 WAR 文件扩展到本地磁盘文件系统，而是完全在内存中.如果不对已部署的 WAR 文件进行基本编辑并重新部署，就无法在内存中创建新文件.

3. 即使服务器将部署的 WAR 文件扩展到本地磁盘文件系统中，所有新创建的文件也会在重新部署甚至简单重启时丢失，因为这些新文件不是原始 WAR 的一部分文件.

您需要将其写入项目/部署文件夹之外的固定路径.例如，/var/webapp/uploads.然后，要让它由您的 web 应用程序提供服务，只需将它作为新的 web 应用程序上下文添加到服务器.

根据您之前的问题，我知道您使用的是 Glassfish 3.1.在这个服务器中，它被称为虚拟主机".您可以在管理控制台中的服务器级别配置它

将上传的文件保存在一个推荐的方式servlet 应用程序(包含 Tomcat 配置示例)

在servlet中读/写一个文本文件，这个文件在JBoss中应该存放在哪里?(包含JBoss配置示例)

在 Java Web 应用程序中从应用程序服务器外部提供静态数据的最简单方法

When I upload a picture, the file is successfully saved and the path is successfully set. But the uploaded image is not displayed immediately after the form submit. Only when I reload the page, the uploaded image is displayed.

I'm saving the uploaded file as below:

InputStream is;
try {
    File file = new File("C:\****\*****\Documents\NetBeansProjects\EventsCalendary\web\resources\images\uploadPhoto.png");
    is = event.getFile().getInputstream();
    OutputStream os = new FileOutputStream(file);
    setUserPhoto("\EventsCalendary\resources\images\"+file.getName());   
    byte buf[] = new byte[1024];
    int len;
    while ((len = is.read(buf)) > 0) {
        os.write(buf, 0, len);
    }
    os.close();
    is.close();

} catch (IOException ex) {
    System.out.println(ex.getStackTrace());
}

Why is the uploaded image only displayed after reloading the page and how can I solve this?

解决方案

You're writing the file straight into the IDE's project folder and your intent seems to save the file in the webapp's deploy folder. This is a bad idea and well due to the following 3 main reasons:

1. Changes in the IDE's project folder does not immediately get reflected in the server's work folder. There's kind of a background job in the IDE which takes care that the server's work folder get synced with last updates (this is in IDE terms called "publishing"). This is the main cause of the problem you're seeing.

2. In real world code there are circumstances where storing uploaded files in the webapp's deploy folder will not work at all. Some servers do (either by default or by configuration) not expand the deployed WAR file into the local disk file system, but instead fully in the memory. You can't create new files in the memory without basically editing the deployed WAR file and redeploying it.

3. Even when the server expands the deployed WAR file into the local disk file system, all newly created files will get lost on a redeploy or even a simple restart, simply because those new files are not part of the original WAR file.

You need to write it to a fixed path outside the project/deploy folder instead. For example, /var/webapp/uploads. Then, to get it to be served by your webapp, just add it as a new web application context to the server.

Based on your previous question, I know that you're using Glassfish 3.1. In this server, it's called a "virtual host". You can configure it at server level in the admin console at http://localhost:4848 > Configuration > HTTP Service > Virtual Servers, or at webapp level by adding the following line to the /WEB-INF/glassfish-web.xml (your IDE should have autogenerated one; note that this file is before Glassfish 3.1 called sun-web.xml, so if you're seeing manuals/blogs/tutorials referencing it, yes it's exactly the same file):

<property name="alternatedocroot_1" value="from=/uploads/* dir=/var/webapp" />

Either way, you should then be able to use http://localhost:8080/contextname/uploads/* to serve those uploaded images from by <img> the usual way.

See also:

• How to upload files to server using JSP/Servlet?
• Recommended way to save uploaded files in a servlet application (contains a Tomcat configuration example)
• Reading/writing a text file in a servlet, where should this file be stored in JBoss? (contains JBoss configuration example)
• Simplest way to serve static data from outside the application server in a Java web application

这篇关于上传的图片只有在刷新页面后才可用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！