CN102508864A - 一种基于Tapestry框架的图片实时预览方法 - Google Patents
一种基于Tapestry框架的图片实时预览方法 Download PDFInfo
- Publication number
- CN102508864A CN102508864A CN2011103050348A CN201110305034A CN102508864A CN 102508864 A CN102508864 A CN 102508864A CN 2011103050348 A CN2011103050348 A CN 2011103050348A CN 201110305034 A CN201110305034 A CN 201110305034A CN 102508864 A CN102508864 A CN 102508864A
- Authority
- CN
- China
- Prior art keywords
- picture
- file system
- path
- file
- framework
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Landscapes
- Information Transfer Between Computers (AREA)
Abstract
本发明提供一种基于Tapestry框架的图片实时预览方法,包括:客户端取得用户上传的图片及图片信息,传递到文件服务器;文件服务器将图片存储到文件***,回传路径给服务端;服务端根据返回地址的路径,把页面图片的地址栏更改成文件***的中地址栏,在客户端实现图片预览。通过本发明提供基于Tapestry框架的图片实时预览方法,可以在实现图片上传及预览,给予更好用户体验,节省服务器资源的浪费,降低服务器的压力,同时也解决了现有技术中多浏览器兼容的问题。
Description
技术领域
本发明涉及计算机领域,特别是涉及一种基于Testry框架的图片实时预览方法。
背景技术
图片上传预览是一种在图片上传之前对图片进行本地预览的技术,使用该技术。使用户选择图片后能立即查看图片,提高用户体验。但随着浏览器安全性的提高,以及许多不同内核的浏览器出现,要实现图片上传预览也越来越困难。
图片预览主要包括两个部分:从file表单控件获取图像数据,根据数据显示预览图像。
程序的file和img属性就是用来保存file控件和显示预览图像的容器的,而img还必须是img元素。
现在的互联网应用中主要有两种实现方式,一种是通过后台调用,这种方式对服务器会造成一定的压力。另一种是通过JavaScript来实现,但这种方式对于浏览器的兼容性比较差,导致图片预览失败或者上传不成功,给用户体验带来不便,而且如果出现网络断线以及用户误操作,会导致之前上传的图片信息丢失要重新进行图片上传,降低用户体验。
所以,需要提供一种新的图片上传预览方法,可以在实现图片上传及预览的同时,给予更好用户体验,节省服务器资源的浪费,降低服务器的压力。
发明内容
本发明的目的在于提供一种基于Tapestry框架的图片实时预览方法,可以在实现图片上传及预览,给予更好用户体验,节省服务器资源的浪费,降低服务器的压力,同时也解决了现有技术中多浏览器兼容的问题。
为解决以上技术问题,本发明提供一种基于Tapestry框架的图片实时预览方法,包括:
客户端取得用户上传的图片及图片信息,传递到文件服务器;
文件服务器将图片存储到文件***,回传路径给服务端;
服务端根据返回地址的路径,把页面图片的地址栏更改成文件***的中地址栏,在客户端实现图片预览。
进一步地,客户端取得用户上传的图片及图片信息,传递到文件服务器;具体包括:
在客户端页面组件中添加上传控件,设置上传控件的上传参数及配置调用服务地址;
在图片上传过程中直接对图片操作,使图片与所操作的对象进行关联,动态显示图片信息;
客户端取得用户上传的图片,通过上传控件取得上传图片信息,传递到文件服务器。
进一步地,文件服务器将图片存储到文件***,回传路径给服务端;具体包括:
文件服务器的文件***中配置文件上传服务,在文件***中对上传的图片进行存储;
图片上传后,文件服务器把图片在文件***中的路径返回到服务端。
进一步地,服务端根据返回的地址路径,把页面图片的地址栏更改成文件***的中地址栏,在客户端实现图片预览;具体包括:服务端根据返回的地址路径,通过JavaScript修改客户端中img的src路径,把页面图片的地址栏更改成文件***的中地址栏,在客户端实现图片预览。
进一步地,所述Tapestry框架是Tapestry5.1框架。
与现有技术相比,本发明提供的一种基于T5的图片实时预览方法,是采用基于Tapestry5.1框架,根据Tapestry框架的特点,把图片上传及预览功能写成一个页面组件,实现图片上传及预览功能,给予更好的用户体验;基于Tapestry框架实现图片预览的同时,已经将图片存储到独立的文件***或独立的图片空间中,对于当前服务器的不会产生影响,不会给服务器增加压力负担,降低了服务器的压力,节省了服务器资源的浪费;此外,由于使用图片有效地与页面结合在一起,在不同的浏览器中,都能正确的展示图片的预览效果,速度快,稳定性有显著的提高,不会有兼容性的影响,解决了现有技术中多浏览器兼容的问题,也克服了因为上传直接对服务端进行操作,而给服务器增加压力的问题。此外,在其他的以Tapestry为框架的方案中,只需修改上传调用的服务地址,就可以重复利用上述页面组件来显示图片预览功能,具有很好的通用性。
附图说明
此处所说明的附图用来提供对本发明的进一步理解,构成本发明的一部分,本发明的示意性实施例及其说明用于解释本发明,并不构成对本发明的不当限定。在附图中:
图1是本发明提供一种基于T5的图片实时预览方法的示意图。
具体实施方式
为了使本发明所要解决的技术问题、技术方案及有益效果更加清楚、明白,以下结合附图和实施例,对本发明进行进一步详细说明。应当理解,此处所描述的具体实施例仅用以解释本发明,并不用于限定本发明。
Tapestry框架是一个位于java servlet容器和Tapestry应用程序之间的层。Tapestry不是一个独立运行的服务器;它是一个servlet的扩展,它运行于servlet容器(例如Tomcat)或包含servlet容器的应用服务器中(如Jbose,Websphere,或者WebLogic)。Tapestry应用其实是由一系列页面组成,而每个页面是由可以复用的组件构成。
本发明提供一种基于Tapestry框架的图片实时预览方法,特别是基于Tapestry5.1框架的图片实时预览方法:在Tapestry框架下,在图片上传过程中,直接对图片进行操作,使图片与所操作的对象进行关联,并且根据图片的大小,动态的显示图片的格式以及像素长宽等图片属性,并将图片上传到独立的文件存储***中,上传成功之后返回图片的浏览地址,再通过JavaScript修改图片的src路径来实现图片的预览功能。
如图1所示,本发明提供一种基于Tapestry框架的图片实时预览方法,包括:
1、客户端取得用户上传的图片及图片信息,传递到独立的文件服务器;具体包括:
在客户端页面组件中,结合flash插件,在页面上添加上传控件,配置调用服务地址,根据需求具体配置上传控件的上传参数,改变配置属性;
在图片上传过程中,直接对图片进行操作,使图片与所操作的对象进行关联,并且根据图片的大小,动态的显示图片的格式以及像素长宽等图片信息,以及显示上传过程;
客户端取得用户上传的图片,通过上传控件取得上传图片信息,传递到独立的文件服务器。
2、文件服务器将图片存储到文件***,回传路径给服务端;具体包括:
文件服务器包括文件***,在文件***中配置文件上传服务,根据业务规则编写上传图片的文件代码,在文件***中对上传的图片进行存储;
图片上传成功后,文件服务器调用回写方法,把所上传的图片在文件***中的路径返回到服务端。
3、服务端根据返回的地址路径,把页面图片的地址栏更改成文件***的中地址栏,在客户端实现图片预览;具体包括:
服务端根据返回的地址路径,通过JavaScript修改客户端中img的src路径,把页面图片的地址栏更改成文件***的中地址栏。这样就可以在客户端实现图片预览的工作。页面刷新之后,之前上传的图片也会在页面上保留不会丢失。
下面将结合实施例来详细说明本发明的实施方式,借此对本发明如何应用技术手段来解决技术问题,并达成技术效果的实现过程能充分理解并据以实施。
现在以淘宝大学图片上传作为例子,具体说明本发明如何实现图片的实时预览。
1、在客户端的页面组件中引入图片上传及预览组件;
2、点击上传按钮,选择所要上传的图片,图片上传过程中,直接对图片进行操作,使图片与所操作的对象进行关联,并且根据图片的大小,动态的显示图片的格式以及像素长宽等图片信息,以及显示上传过程;
3、上传完成后,客户端取得用户上传的图片及通过控件取得上传图片信息,传递到独立的文件服务器;
4、文件服务器将图片存储到文件***,将图片的存储路径回传给服务端;
5、服务端根据返回地址的路径,把页面图片的地址栏更改成文件***的中地址栏,在客户端的左边显示框中显示所上传的图片,达到预览效果。
本发明提供的一种基于Tapestry框架的图片实时预览方法,是采用基于Tapestry5.1框架,根据Tapestry框架的特点,把图片上传及预览功能写成一个页面组件,实现图片上传及预览功能,给予更好的用户体验;基于Tapestry框架实现图片预览的同时,已经将图片存储到独立的文件***或独立的图片空间中,对于当前服务器的不会产生影响,不会给服务器增加压力负担,降低了服务器的压力,节省了服务器资源的浪费;此外,由于使用图片有效地与页面结合在一起,在不同的浏览器中,都能正确的展示图片的预览效果,速度快,稳定性有显著的提高,不会有兼容性的影响,解决了现有技术中多浏览器兼容的问题,也克服了因为上传直接对服务端进行操作,而给服务器增加压力的问题。此外,在其他的以Tapestry为框架的方案中,只需修改上传调用的服务地址,就可以重复利用上述页面组件来显示图片预览功能,具有很好的通用性。
上述说明示出并描述了本发明的一个优选实施例,但如前所述,应当理解本发明并非局限于本文所披露的形式,不应看作是对其他实施例的排除,而可用于各种其他组合、修改和环境,并能够在本文所述发明构想范围内,通过上述教导或相关领域的技术或知识进行改动。而本领域人员所进行的改动和变化不脱离本发明的精神和范围,则都应在本发明所附权利要求的保护范围内。
Claims (5)
1.一种基于Tapestry框架的图片实时预览方法,其特征在于,包括:
客户端取得用户上传的图片及图片信息,传递到文件服务器;
文件服务器将图片存储到文件***,回传路径给服务端;
服务端根据返回地址的路径,把页面图片的地址栏更改成文件***的中地址栏,在客户端实现图片预览。
2.如权利要求1所述的方法,其特征在于,客户端取得用户上传的图片及图片信息,传递到文件服务器;具体包括:
在客户端页面组件中添加上传控件,设置上传控件的上传参数及配置调用服务地址;
在图片上传过程中直接对图片操作,使图片与所操作的对象进行关联,动态显示图片信息;
客户端取得用户上传的图片,通过上传控件取得上传图片信息,传递到文件服务器。
3.如权利要求1所述的方法,其特征在于,文件服务器将图片存储到文件***,回传路径给服务端;具体包括:
文件服务器的文件***中配置文件上传服务,在文件***中对上传的图片进行存储;
图片上传后,文件服务器把图片在文件***中的路径返回到服务端。
4.如权利要求1所述的方法,其特征在于,服务端根据返回的地址路径,把页面图片的地址栏更改成文件***的中地址栏,在客户端实现图片预览;具体包括:服务端根据返回的地址路径,通过JavaScript修改客户端中img的src路径,把页面图片的地址栏更改成文件***的中地址栏,在客户端实现图片预览。
5.如权利要求1至4任一项所述的方法,其特征在于,所述Tapestry框架是Tapestry5.1框架。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN2011103050348A CN102508864A (zh) | 2011-10-10 | 2011-10-10 | 一种基于Tapestry框架的图片实时预览方法 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN2011103050348A CN102508864A (zh) | 2011-10-10 | 2011-10-10 | 一种基于Tapestry框架的图片实时预览方法 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN102508864A true CN102508864A (zh) | 2012-06-20 |
Family
ID=46220950
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN2011103050348A Pending CN102508864A (zh) | 2011-10-10 | 2011-10-10 | 一种基于Tapestry框架的图片实时预览方法 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN102508864A (zh) |
Cited By (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN103853416A (zh) * | 2012-11-29 | 2014-06-11 | 腾讯科技(深圳)有限公司 | 附件上传的方法及装置 |
CN107479783A (zh) * | 2017-07-28 | 2017-12-15 | 深圳市元征科技股份有限公司 | 一种图片上传方法及终端 |
CN109840083A (zh) * | 2018-12-27 | 2019-06-04 | 杭州亚信云信息科技有限公司 | 网页组件模板构建方法、装置、计算机设备和存储介质 |
CN111984596A (zh) * | 2020-07-08 | 2020-11-24 | 福建亿能达信息技术股份有限公司 | 一种ui框架的文件上传分组管理方法、装置、设备和介质 |
CN114489639A (zh) * | 2021-12-22 | 2022-05-13 | 北京达佳互联信息技术有限公司 | 文件生成方法、装置、设备及存储介质 |
Citations (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20080027928A1 (en) * | 2006-07-19 | 2008-01-31 | Larson Michael D | QuickView - combination of system and software components which enables search engine users to quickly identifiying relevant search returned results using visual images as references |
US20080034381A1 (en) * | 2006-08-04 | 2008-02-07 | Julien Jalon | Browsing or Searching User Interfaces and Other Aspects |
CN102184177A (zh) * | 2011-01-04 | 2011-09-14 | 北京开心人信息技术有限公司 | 一种预览文件的方法与*** |
-
2011
- 2011-10-10 CN CN2011103050348A patent/CN102508864A/zh active Pending
Patent Citations (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20080027928A1 (en) * | 2006-07-19 | 2008-01-31 | Larson Michael D | QuickView - combination of system and software components which enables search engine users to quickly identifiying relevant search returned results using visual images as references |
US20080034381A1 (en) * | 2006-08-04 | 2008-02-07 | Julien Jalon | Browsing or Searching User Interfaces and Other Aspects |
CN102184177A (zh) * | 2011-01-04 | 2011-09-14 | 北京开心人信息技术有限公司 | 一种预览文件的方法与*** |
Non-Patent Citations (1)
Title |
---|
万能: "异构CAD平台标准件库的实现技术", 《制造业自动化》 * |
Cited By (8)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN103853416A (zh) * | 2012-11-29 | 2014-06-11 | 腾讯科技(深圳)有限公司 | 附件上传的方法及装置 |
CN103853416B (zh) * | 2012-11-29 | 2017-09-12 | 腾讯科技(深圳)有限公司 | 附件上传的方法及装置 |
US10270721B2 (en) | 2012-11-29 | 2019-04-23 | Tencent Technology (Shenzhen) Company Limited | Method and apparatus for uploading an attachment |
CN107479783A (zh) * | 2017-07-28 | 2017-12-15 | 深圳市元征科技股份有限公司 | 一种图片上传方法及终端 |
CN109840083A (zh) * | 2018-12-27 | 2019-06-04 | 杭州亚信云信息科技有限公司 | 网页组件模板构建方法、装置、计算机设备和存储介质 |
CN111984596A (zh) * | 2020-07-08 | 2020-11-24 | 福建亿能达信息技术股份有限公司 | 一种ui框架的文件上传分组管理方法、装置、设备和介质 |
CN111984596B (zh) * | 2020-07-08 | 2022-05-10 | 福建亿能达信息技术股份有限公司 | 一种ui框架的文件上传分组管理方法、装置、设备和介质 |
CN114489639A (zh) * | 2021-12-22 | 2022-05-13 | 北京达佳互联信息技术有限公司 | 文件生成方法、装置、设备及存储介质 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN110781423B (zh) | 网页生成方法、装置及电子设备 | |
US10754668B2 (en) | Media file presentation method, client application, and plug-in | |
US9111007B2 (en) | Adaptive rendering of a webpage on an electronic display device | |
CN101449270B (zh) | 自动显示尺寸调整后的图像 | |
CN102684986B (zh) | 一种终端显示图片的方法和*** | |
CN105100869A (zh) | 弹幕显示方法及装置 | |
CN103258024B (zh) | 网页中图片局部内容的分享方法、***和装置 | |
CN102682093A (zh) | 一种移动浏览器网页分段加载方法及*** | |
CN102662928A (zh) | 带文档导入的富文本编辑方法及装置 | |
CN105094563A (zh) | 一种图片裁剪方法及裁剪*** | |
CN103631958A (zh) | 一种页面自动适配实现内容多屏展示的方法 | |
CN102508864A (zh) | 一种基于Tapestry框架的图片实时预览方法 | |
US8994748B2 (en) | Anchors for displaying image sprites, sub-regions and 3D images | |
US9256919B2 (en) | Systems and methods for image processing using a resizing template | |
US20180365263A1 (en) | Synchronized Views for Cloud-Based File Collaboration | |
JP2023537767A (ja) | 画像処理方法及び装置、並びにコンピュータ可読記憶媒体 | |
CN110895481A (zh) | 桌面应用的渲染方法、装置和*** | |
CN102915371A (zh) | 在网页中动态引用文件的方法 | |
CN111033497B (zh) | 在远程观看的演示中提供超链接 | |
CN109543119B (zh) | 页面预览***及方法 | |
CN102999512A (zh) | 处理文字广告的方法及其*** | |
JP5303534B2 (ja) | 体裁情報処理装置及び方法 | |
CN111241438B (zh) | 漫画图片展示方法、装置、计算机可读存储介质和计算机设备 | |
JP2013524375A (ja) | 高解像度およびあらゆる画面に適合するインターネットコンテンツ用hd−web方法 | |
US20190180489A1 (en) | Systems and methods for digital content delivery over a network |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
C06 | Publication | ||
PB01 | Publication | ||
C10 | Entry into substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
DD01 | Delivery of document by public notice |
Addressee: Wu Zhenyu Document name: Notification of Passing Examination on Formalities |
|
C02 | Deemed withdrawal of patent application after publication (patent law 2001) | ||
WD01 | Invention patent application deemed withdrawn after publication |
Application publication date: 20120620 |