上传图片并停留在页面上

Question

我正在建立一个允许用户上传图片的网站，然后以用户友好的方式显示EXIF信息。

我还希望为用户提供一个选项，使其能够在线共享他们的图片。

目前，我已经完全可以使用图像预览的JavaScript，我在窗体上选择了一个图像，它出现在网站上...

我也有代码的上传部分（PHP）。将该图像上传到文件夹，并将相应图像的名称和路径上传到MySQL数据库。

问题是...我希望该过程以这种方式发生：

1. 用户选择图片-工作

2. 图片作为预览显示在显示屏上-工作

3. 用户按下上传按钮（如果需要）-工作

4. 图像已上传到定义的文件夹，并且名称和数据库路径-工作

5. 网站停留在同一页面上，图像预览仍在此处...-待完成

6. 网站上会出现一个新的文本区域，其中包含图像路径（从数据库中获取），以便用户可以共享图像-待完成

---------------- // -------------------

我已经阅读了一些有关此的文章和主题，并且应该使用JQuery来完成它，以便按照我上面定义的方式工作...

你们能澄清这是真的吗？

--------------- // ---------------

更新

提出的解决方案@Dhanushka sasanka奏效了！现在，我可以将图片上传到文件夹中，并将信息上传到数据库中，并且它会保留在页面上而无需刷新！

Answer 1

我这样做是因为您必须使用JqueryForm Plugin来执行此操作，因为在“上载”按钮的形式中，它必须为type="submit"，因此在按下该“上载”按钮后将重新加载当前页面，因此必须使用此插件JQuery Form Plugin 完成这一步。由此您可以刷新图像而无需重新加载页面。

Answer 2

Sending data to server in background without refresh/reload/change the current page可以使用JavaScript AJAX Request完成。

如果您要将数据传递到服务器并停留在同一页面上，那么是的，您需要在Javascript中使用AJAX。

但是使用Jquery很容易实现Ajax request and callbacks，因此使用jQuery。