[发明专利]一种基于Tapestry框架的图片实时预览方法

说明书

技术领域

本发明涉及计算机领域，特别是涉及一种基于Testry框架的图片实时预览方法。

背景技术

图片上传预览是一种在图片上传之前对图片进行本地预览的技术，使用该技术。使用户选择图片后能立即查看图片，提高用户体验。但随着浏览器安全性的提高，以及许多不同内核的浏览器出现，要实现图片上传预览也越来越困难。

图片预览主要包括两个部分：从file表单控件获取图像数据，根据数据显示预览图像。

程序的file和img属性就是用来保存file控件和显示预览图像的容器的，而img还必须是img元素。

现在的互联网应用中主要有两种实现方式，一种是通过后台调用，这种方式对服务器会造成一定的压力。另一种是通过JavaScript来实现，但这种方式对于浏览器的兼容性比较差，导致图片预览失败或者上传不成功，给用户体验带来不便，而且如果出现网络断线以及用户误操作，会导致之前上传的图片信息丢失要重新进行图片上传，降低用户体验。

所以，需要提供一种新的图片上传预览方法，可以在实现图片上传及预览的同时，给予更好用户体验，节省服务器资源的浪费，降低服务器的压力。

发明内容

本发明的目的在于提供一种基于Tapestry框架的图片实时预览方法，可以在实现图片上传及预览，给予更好用户体验，节省服务器资源的浪费，降低服务器的压力，同时也解决了现有技术中多浏览器兼容的问题。

为解决以上技术问题，本发明提供一种基于Tapestry框架的图片实时预览方法，包括：

客户端取得用户上传的图片及图片信息，传递到文件服务器；

文件服务器将图片存储到文件系统，回传路径给服务端；

服务端根据返回地址的路径，把页面图片的地址栏更改成文件系统的中地址栏，在客户端实现图片预览。

进一步地，客户端取得用户上传的图片及图片信息，传递到文件服务器；具体包括：

在客户端页面组件中添加上传控件，设置上传控件的上传参数及配置调用服务地址；

在图片上传过程中直接对图片操作，使图片与所操作的对象进行关联，动态显示图片信息；

客户端取得用户上传的图片，通过上传控件取得上传图片信息，传递到文件服务器。

进一步地，文件服务器将图片存储到文件系统，回传路径给服务端；具体包括：

文件服务器的文件系统中配置文件上传服务，在文件系统中对上传的图片进行存储；

图片上传后，文件服务器把图片在文件系统中的路径返回到服务端。

进一步地，服务端根据返回的地址路径，把页面图片的地址栏更改成文件系统的中地址栏，在客户端实现图片预览；具体包括：服务端根据返回的地址路径，通过JavaScript修改客户端中img的src路径，把页面图片的地址栏更改成文件系统的中地址栏，在客户端实现图片预览。

进一步地，所述Tapestry框架是Tapestry5.1框架。

与现有技术相比，本发明提供的一种基于T5的图片实时预览方法，是采用基于Tapestry5.1框架，根据Tapestry框架的特点，把图片上传及预览功能写成一个页面组件，实现图片上传及预览功能，给予更好的用户体验；基于Tapestry框架实现图片预览的同时，已经将图片存储到独立的文件系统或独立的图片空间中，对于当前服务器的不会产生影响，不会给服务器增加压力负担，降低了服务器的压力，节省了服务器资源的浪费；此外，由于使用图片有效地与页面结合在一起，在不同的浏览器中，都能正确的展示图片的预览效果，速度快，稳定性有显著的提高，不会有兼容性的影响，解决了现有技术中多浏览器兼容的问题，也克服了因为上传直接对服务端进行操作，而给服务器增加压力的问题。此外，在其他的以Tapestry为框架的方案中，只需修改上传调用的服务地址，就可以重复利用上述页面组件来显示图片预览功能，具有很好的通用性。

附图说明

此处所说明的附图用来提供对本发明的进一步理解，构成本发明的一部分，本发明的示意性实施例及其说明用于解释本发明，并不构成对本发明的不当限定。在附图中：

图1是本发明提供一种基于T5的图片实时预览方法的示意图。

具体实施方式

为了使本发明所要解决的技术问题、技术方案及有益效果更加清楚、明白，以下结合附图和实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本发明，并不用于限定本发明。