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) | 高解像度およびあらゆる画面に適合するインターネットコンテンツ用ｈｄ−ｗｅｂ方法 | |
| 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 |