CN111124234A - 一种图片显示方法以及图片显示装置 - Google Patents
一种图片显示方法以及图片显示装置 Download PDFInfo
- Publication number
- CN111124234A CN111124234A CN201911415685.5A CN201911415685A CN111124234A CN 111124234 A CN111124234 A CN 111124234A CN 201911415685 A CN201911415685 A CN 201911415685A CN 111124234 A CN111124234 A CN 111124234A
- Authority
- CN
- China
- Prior art keywords
- picture
- target
- uploading
- module
- condition
- 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
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/04845—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/04842—Selection of displayed objects or displayed text elements
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
- H04L67/00—Network arrangements or protocols for supporting network services or applications
- H04L67/01—Protocols
- H04L67/06—Protocols specially adapted for file transfer, e.g. file transfer protocol [FTP]
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
- H04L69/00—Network arrangements, protocols or services independent of the application payload and not provided for in the other groups of this subclass
- H04L69/22—Parsing or analysis of headers
Landscapes
- Engineering & Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Computer Networks & Wireless Communication (AREA)
- Signal Processing (AREA)
- Computer Security & Cryptography (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本申请提供一种图片显示方法以及图片显示装置，该方法包括：在接收到对图片上传控件的点击操作的情况下，根据点击操作，显示多张图片，并从多张图片中选择待上传图片；根据预设参数对待上传图片进行调整，获得目标图片；在接收到图片上传指令的情况下，根据图片上传指令，显示图片上传动画，并利用预设编码方式对目标图片进行编码，获得目标字符串；向服务端发送图片上传请求；在监听到图片上传请求成功发送至服务端的情况下，移除图片上传动画，并接收服务端发送的目标地址；将目标地址引入img标签，获得目标图片；显示目标图片。这样，可以避免使用代码冗余的开源插件。图片显示过程简单，方便快捷。
Description
技术领域
本申请涉及通信技术领域，尤其涉及一种图片显示方法以及图片显示装置。
背景技术
现有技术中，将图片在本地进行预览时，前端开发人员需要寻找开源插件，或者学习超文本标记语言(Hyper Text Markup Language,HTML)的输入文件(input file)的应用程序编程接口(Application Programming Interface,API)来实现在本地预览图片。
例如，可以直接调用开源插件，调用开源插件之后，可以唤起图片库。进而可以读取图片库中的图片的信息，并根据所读取的图片的信息将图片在本地绘制出来。
但是，开源插件的底层代码是事先经过压缩打包的，经过压缩打包的开源插件的底层代码可读性差，而且开源插件的底层代码包含了很多不相关的代码。例如，开源插件的底层代码包含了10个功能，而实际在本地预览图片时，需要的仅为这10个功能中的3个功能。由于前端开发人员无法对经过压缩打包的开源插件的底层代码进行修改，导致代码冗余。
发明内容
本申请提供了一种图片显示方法以及图片显示装置，以解决现有技术中，将图片在本地进行预览时，由于前端开发人员无法对经过压缩打包的开源插件的底层代码进行修改，导致代码冗余的问题。
第一方面，本发明提供了一种图片显示方法，包括：
在接收到对图片上传控件的点击操作的情况下，根据所述点击操作，显示多张图片，并从所述多张图片中选择待上传图片；
根据预设参数对所述待上传图片进行调整，获得目标图片；
在接收到图片上传指令的情况下，根据所述图片上传指令，显示图片上传动画，并利用预设编码方式对所述目标图片进行编码，获得目标字符串；
向服务端发送图片上传请求，其中，所述图片上传请求包含所述目标字符串；
在监听到所述图片上传请求成功发送至所述服务端的情况下，移除所述图片上传动画，并接收所述服务端发送的目标地址，其中，所述目标地址为所述服务端接收到所述图片上传请求之后，对所述图片上传请求所包含的所述目标字符串进行解析，获得所述目标图片，将所述目标图片在目标存储位置进行存储时，所述目标存储位置的地址；
将所述目标地址引入img标签，获得所述目标图片；
显示所述目标图片。
进一步的，在所述显示所述目标图片的步骤之前，所述方法还包括：
生成所述目标图片对应的索引，并将所述目标图片与所述目标图片对应的索引进行绑定；
在所述显示所述目标图片的步骤之后，所述方法还包括：
接收图片删除指令；
确定所述图片删除指令对应的目标索引；
删除与所述目标索引相绑定的图片。
进一步的，所述方法还包括：
在监听到所述图片上传请求发送至所述服务端失败的情况下，显示图片上传失败信息。
进一步的，在所述显示图片上传失败信息的步骤之后，所述方法还包括：
移除所述图片上传动画。
进一步的，在所述根据预设参数对所述待上传图片进行调整，获得目标图片的步骤之前，所述方法还包括：
根据所述预设参数，判断所述待上传图片是否符合预设格式条件；
在判断出所述待上传图片符合所述预设格式条件的情况下，执行所述根据预设参数对所述待上传图片进行调整，获得目标图片的步骤。
进一步的，在所述根据所述点击操作，显示多张图片，并从所述多张图片中选择待上传图片的步骤之前，所述方法还包括：
在Java Script文件中封装全局方法；
执行所述全局方法，生成所述图片上传控件；
在所述全局方法中设置所述预设参数。
第二方面，本发明还提供了一种图片显示装置，包括：
选择模块，用于在接收到对图片上传控件的点击操作的情况下，根据所述点击操作，显示多张图片，并从所述多张图片中选择待上传图片；
调整模块，用于根据预设参数对所述待上传图片进行调整，获得目标图片；
编码模块，用于在接收到图片上传指令的情况下，根据所述图片上传指令，显示图片上传动画，并利用预设编码方式对所述目标图片进行编码，获得目标字符串；
发送模块，用于向服务端发送图片上传请求，其中，所述图片上传请求包含所述目标字符串；
第一接收模块，用于在监听到所述图片上传请求成功发送至所述服务端的情况下，移除所述图片上传动画，并接收所述服务端发送的目标地址，其中，所述目标地址为所述服务端接收到所述图片上传请求之后，对所述图片上传请求所包含的所述目标字符串进行解析，获得所述目标图片，将所述目标图片在目标存储位置进行存储时，所述目标存储位置的地址；
引入模块，用于将所述目标地址引入img标签，获得所述目标图片；
第一显示模块，用于显示所述目标图片。
进一步的，所述图片显示装置还包括：
绑定模块，用于生成所述目标图片对应的索引，并将所述目标图片与所述目标图片对应的索引进行绑定；
第二接收模块，用于接收图片删除指令；
确定模块，用于确定所述图片删除指令对应的目标索引；
删除模块，用于删除与所述目标索引相绑定的图片。
进一步的，所述图片显示装置还包括：
第二显示模块，用于在监听到所述图片上传请求发送至所述服务端失败的情况下，显示图片上传失败信息。
进一步的，所述图片显示装置还包括：
移除模块，用于移除所述图片上传动画。
进一步的，所述图片显示装置还包括：
判断模块，用于根据所述预设参数，判断所述待上传图片是否符合预设格式条件；
执行模块，用于在判断出所述待上传图片符合所述预设格式条件的情况下，执行所述根据预设参数对所述待上传图片进行调整，获得目标图片的步骤。
进一步的，所述图片显示装置还包括：
封装模块，用于在Java Script文件中封装全局方法；
生成模块，用于执行所述全局方法，生成所述图片上传控件；
设置模块，用于在所述全局方法中设置所述预设参数。
第三方面，本发明还提供了一种电子设备，包括：
存储器，用于存储程序指令；
处理器，用于调用并执行所述存储器中的程序指令，以实现第一方面所述的图片显示方法。
第四方面，本发明还提供了一种可读存储介质，包括：所述可读存储介质中存储有计算机程序，当图片显示装置的至少一个处理器执行所述计算机程序时，图片显示装置执行第一方面所述的图片显示方法。
由以上技术方案可知，本发明实施例提供的一种图片显示方法以及图片显示装置，在接收到对图片上传控件的点击操作的情况下，根据所述点击操作，显示多张图片，并从所述多张图片中选择待上传图片；根据预设参数对所述待上传图片进行调整，获得目标图片；在接收到图片上传指令的情况下，根据所述图片上传指令，显示图片上传动画，并利用预设编码方式对所述目标图片进行编码，获得目标字符串；向服务端发送图片上传请求，其中，所述图片上传请求包含所述目标字符串；在监听到所述图片上传请求成功发送至所述服务端的情况下，移除所述图片上传动画，并接收所述服务端发送的目标地址，其中，所述目标地址为所述服务端接收到所述图片上传请求之后，对所述图片上传请求所包含的所述目标字符串进行解析，获得所述目标图片，将所述目标图片在目标存储位置进行存储时，所述目标存储位置的地址；将所述目标地址引入img标签，获得所述目标图片；显示所述目标图片。这样，在接收到图片上传指令的情况下，可以根据图片上传指令，利用预设编码方式对目标图片进行编码，获得目标字符串，并向服务端发送包含目标字符串的图片上传请求。在监听到图片上传请求成功发送至服务端的情况下，可以接收服务端发送的目标地址。进而可以将目标地址引入img标签，获得目标图片，并显示目标图片。可以避免使用代码冗余的开源插件。图片显示过程简单，方便快捷。
附图说明
为了更清楚地说明本申请的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，显而易见地，对于本领域普通技术人员而言，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1为本发明提供的一种图片显示方法的流程图；
图2为本发明提供的另一种图片显示方法的流程图；
图3为本发明提供的一种图片显示装置的结构图；
图4为本发明提供的另一种图片显示装置的结构图；
图5为本发明提供的另一种图片显示装置的结构图；
图6为本发明提供的另一种图片显示装置的结构图；
图7为本发明提供的另一种图片显示装置的结构图；
图8为本发明提供的另一种图片显示装置的结构图；
图9为本发明提供的一种电子设备的硬件结构示意图。
具体实施方式
下面将详细地对实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下实施例中描述的实施方式并不代表与本申请相一致的所有实施方式。仅是与权利要求书中所详述的、本申请的一些方面相一致的***和方法的示例。
参见图1，图1是本发明提供的一种图片显示方法的流程图。如图1所示，包括以下步骤：
步骤101、在接收到对图片上传控件的点击操作的情况下，根据所述点击操作，显示多张图片，并从所述多张图片中选择待上传图片。
在步骤101中，可以显示图片上传控件，并接收对该图片上传控件的点击操作。在接收到对该图片上传控件的点击操作的情况下，可以根据接收到的点击操作，显示多张图片，并从多张图片中选择待上传图片。
步骤102、根据预设参数对所述待上传图片进行调整，获得目标图片。
在步骤102中，可以根据预设参数对待上传图片进行调整，获得目标图片。例如，可以根据预设参数调整待上传图片的大小，即可以根据预设参数调整待上传图片的长度以及宽度等等。
步骤103、在接收到图片上传指令的情况下，根据所述图片上传指令，显示图片上传动画，并利用预设编码方式对所述目标图片进行编码，获得目标字符串。
在步骤103中，用户可以点击图片上传按钮，此时会接收到图片上传指令。在接收到图片上传指令的情况下，可以根据接收到的图片上传指令，显示图片上传动画，并利用预设编码方式对目标图片进行编码，获得目标字符串。例如，可以利用base64编码方式对目标图片进行编码，获得目标字符串。需要说明的是，显示图片上传动画可以起到提示作用，提示用户图片正在上传中，使用户了解图片上传进度。
步骤104、向服务端发送图片上传请求，其中，所述图片上传请求包含所述目标字符串。
在步骤104中，可以向服务端发送图片上传请求。其中，该图片上传请求包含目标字符串。例如，可以向服务端发送ajax请求，该ajax请求包含目标字符串。进一步的，该目标字符串为利用base64编码方式对目标图片进行编码，所获得的目标字符串。
步骤105、在监听到所述图片上传请求成功发送至所述服务端的情况下，移除所述图片上传动画，并接收所述服务端发送的目标地址，其中，所述目标地址为所述服务端接收到所述图片上传请求之后，对所述图片上传请求所包含的所述目标字符串进行解析，获得所述目标图片，将所述目标图片在目标存储位置进行存储时，所述目标存储位置的地址。
在步骤105中，在监听到图片上传请求成功发送至服务端的情况下，也即在监听到ajax请求成功发送至服务端的情况下，可以移除图片上传动画，并接收服务端发送的目标地址。其中，该目标地址为服务端接收到图片上传请求之后，对图片上传请求所包含的目标字符串进行解析，获得目标图片，将目标图片在目标存储位置进行存储时，目标存储位置的地址。
步骤106、将所述目标地址引入img标签，获得所述目标图片。
在步骤106中，可以将服务端返回的目标地址引入img标签，获得目标图片。即可以根据服务端返回的目标地址渲染出对应的目标图片。
步骤107、显示所述目标图片。
在步骤107中，可以显示目标图片。
需要说明的是，现有技术中，前端开发人员需要寻找开源插件来实现在本地预览图片。但是，开源插件的底层代码是事先经过压缩打包的，经过压缩打包的开源插件的底层代码可读性差，而且开源插件的底层代码包含了很多不相关的代码。由于前端开发人员无法对经过压缩打包的开源插件的底层代码进行修改，导致代码冗余。
而在本申请中，在接收到图片上传指令的情况下，可以根据图片上传指令，利用预设编码方式对目标图片进行编码，获得目标字符串，并向服务端发送包含目标字符串的图片上传请求。在监听到图片上传请求成功发送至服务端的情况下，可以接收服务端发送的目标地址。进而可以将目标地址引入img标签，获得目标图片，并显示目标图片。可以避免使用代码冗余的开源插件。图片显示过程简单，方便快捷。
由以上技术方案可知，本发明实施例提供的一种图片显示方法，在接收到对图片上传控件的点击操作的情况下，根据所述点击操作，显示多张图片，并从所述多张图片中选择待上传图片；根据预设参数对所述待上传图片进行调整，获得目标图片；在接收到图片上传指令的情况下，根据所述图片上传指令，显示图片上传动画，并利用预设编码方式对所述目标图片进行编码，获得目标字符串；向服务端发送图片上传请求，其中，所述图片上传请求包含所述目标字符串；在监听到所述图片上传请求成功发送至所述服务端的情况下，移除所述图片上传动画，并接收所述服务端发送的目标地址，其中，所述目标地址为所述服务端接收到所述图片上传请求之后，对所述图片上传请求所包含的所述目标字符串进行解析，获得所述目标图片，将所述目标图片在目标存储位置进行存储时，所述目标存储位置的地址；将所述目标地址引入img标签，获得所述目标图片；显示所述目标图片。这样，在接收到图片上传指令的情况下，可以根据图片上传指令，利用预设编码方式对目标图片进行编码，获得目标字符串，并向服务端发送包含目标字符串的图片上传请求。在监听到图片上传请求成功发送至服务端的情况下，可以接收服务端发送的目标地址。进而可以将目标地址引入img标签，获得目标图片，并显示目标图片。可以避免使用代码冗余的开源插件。图片显示过程简单，方便快捷。
参见图2，图2是本发明提供的另一种图片显示方法的流程图。如图2所示，包括以下步骤：
步骤201、在接收到对图片上传控件的点击操作的情况下，根据所述点击操作，显示多张图片，并从所述多张图片中选择待上传图片。
在步骤201中，可以显示图片上传控件，并接收对该图片上传控件的点击操作。在接收到对该图片上传控件的点击操作的情况下，可以根据接收到的点击操作，显示多张图片，并从多张图片中选择待上传图片。
可选的，在所述根据所述点击操作，显示多张图片，并从所述多张图片中选择待上传图片的步骤之前，所述方法还包括：
在Java Script文件中封装全局方法；
执行所述全局方法，生成所述图片上传控件；
在所述全局方法中设置所述预设参数。
需要说明的是，可以在Java Script文件中封装全局方法，进而可以执行该全局方法，生成上述图片上传控件。还可以在该全局方法中设置预设参数。
可选的，在所述根据预设参数对所述待上传图片进行调整，获得目标图片的步骤之前，所述方法还包括：
根据所述预设参数，判断所述待上传图片是否符合预设格式条件；
在判断出所述待上传图片符合所述预设格式条件的情况下，执行所述根据预设参数对所述待上传图片进行调整，获得目标图片的步骤。
可以根据在全局方法中所设置的预设参数，判断待上传图片是否符合预设格式条件。该预设格式条件可以为webp、bmp、jpg、png、tif以及gif等图片格式。在判断出待上传图片符合预设格式条件的情况下，也即在判断出待上传图片的图片格式为webp、bmp、jpg、png、tif以及gif中的任意一种的情况下，可以根据预设参数对待上传图片进行调整，获得目标图片。
步骤202、根据预设参数对所述待上传图片进行调整，获得目标图片。
在步骤202中，可以根据预设参数对待上传图片进行调整，获得目标图片。例如，可以根据预设参数调整待上传图片的大小，即可以根据预设参数调整待上传图片的长度以及宽度等等。
步骤203、在接收到图片上传指令的情况下，根据所述图片上传指令，显示图片上传动画，并利用预设编码方式对所述目标图片进行编码，获得目标字符串。
在步骤203中，用户可以点击图片上传按钮，此时会接收到图片上传指令。在接收到图片上传指令的情况下，可以根据接收到的图片上传指令，显示图片上传动画，并利用预设编码方式对目标图片进行编码，获得目标字符串。例如，可以利用base64编码方式对目标图片进行编码，获得目标字符串。需要说明的是，显示图片上传动画可以起到提示作用，提示用户图片正在上传中，使用户了解图片上传进度。
步骤204、向服务端发送图片上传请求，其中，所述图片上传请求包含所述目标字符串。
在步骤204中，可以向服务端发送图片上传请求。其中，该图片上传请求包含目标字符串。例如，可以向服务端发送ajax请求，该ajax请求包含目标字符串。进一步的，该目标字符串为利用base64编码方式对目标图片进行编码，所获得的目标字符串。
步骤205、在监听到所述图片上传请求成功发送至所述服务端的情况下，移除所述图片上传动画，并接收所述服务端发送的目标地址，其中，所述目标地址为所述服务端接收到所述图片上传请求之后，对所述图片上传请求所包含的所述目标字符串进行解析，获得所述目标图片，将所述目标图片在目标存储位置进行存储时，所述目标存储位置的地址。
在步骤205中，在监听到图片上传请求成功发送至服务端的情况下，也即在监听到ajax请求成功发送至服务端的情况下，可以移除图片上传动画，并接收服务端发送的目标地址。其中，该目标地址为服务端接收到图片上传请求之后，对图片上传请求所包含的目标字符串进行解析，获得目标图片，将目标图片在目标存储位置进行存储时，目标存储位置的地址。
可选的，所述方法还包括：
在监听到所述图片上传请求发送至所述服务端失败的情况下，显示图片上传失败信息。
需要说明的是，在监听到图片上传请求发送至服务端失败的情况下，也即在监听到ajax请求发送至服务端失败的情况下，可以显示图片上传失败信息。这样，在监听到图片上传请求发送至服务端失败的情况下，可以提示用户图片上传失败，使用户及时了解图片是否已成功上传。
可选的，在所述显示图片上传失败信息的步骤之后，所述方法还包括：
移除所述图片上传动画。
进一步的，在显示图片上传失败信息之后，可以移除之前所显示的图片上传动画。
步骤206、将所述目标地址引入img标签，获得所述目标图片。
在步骤206中，可以将服务端返回的目标地址引入img标签，获得目标图片。即可以根据服务端返回的目标地址渲染出对应的目标图片。
步骤207、生成所述目标图片对应的索引，并将所述目标图片与所述目标图片对应的索引进行绑定。
在步骤207中，还可以生成目标图片对应的索引，并将目标图片与目标图片对应的索引进行绑定。该目标图片对应的索引用于唯一标识该目标图片。
步骤208、显示所述目标图片。
在步骤208中，可以显示目标图片，且该目标图片上可以显示删除按钮。例如，可以在目标图片的右上角显示一个叉形标记。需要说明的是，目标图片的删除按钮与目标图片的索引相对应，也即目标图片的右上角的叉形标记与目标图片的索引相对应。
步骤209、接收图片删除指令。
在步骤209中，可以接收图片删除指令。例如，可以接收对图片上所显示的删除按钮的点击操作，也即可以接收对图片的右上角所显示的叉形标记的点击操作。此时，即接收到图片删除指令。
步骤2010、确定所述图片删除指令对应的目标索引。
在步骤2010中，可以确定图片删除指令对应的目标索引。例如，可以先确定用户所点击的删除按钮，进而可以根据用户所点击的删除按钮确定与该删除按钮相对应的目标索引。
步骤2011、删除与所述目标索引相绑定的图片。
在步骤2011中，确定了图片删除指令对应的目标索引之后，即可以删除与目标索引相绑定的图片。这样，在接收到图片删除指令的情况下，可以确定图片删除指令对应的目标索引。进而可以删除与目标索引相绑定的图片。操作过程简单，方便快捷。
由以上技术方案可知，本发明实施例提供的一种图片显示方法，在接收到图片上传指令的情况下，可以根据图片上传指令，利用预设编码方式对目标图片进行编码，获得目标字符串，并向服务端发送包含目标字符串的图片上传请求。在监听到图片上传请求成功发送至服务端的情况下，可以接收服务端发送的目标地址。进而可以将目标地址引入img标签，获得目标图片，并显示目标图片。可以避免使用代码冗余的开源插件，图片显示过程简单。进一步的，在接收到图片删除指令的情况下，可以确定图片删除指令对应的目标索引，进而可以删除与目标索引相绑定的图片。操作过程简单，方便快捷。
参见图3，图3是本发明提供的一种图片显示装置的结构图。如图3所示，图片显示装置300包括选择模块301、调整模块302、编码模块303、发送模块304、第一接收模块305、引入模块306和第一显示模块307，其中：
选择模块301，用于在接收到对图片上传控件的点击操作的情况下，根据所述点击操作，显示多张图片，并从所述多张图片中选择待上传图片；
调整模块302，用于根据预设参数对所述待上传图片进行调整，获得目标图片；
编码模块303，用于在接收到图片上传指令的情况下，根据所述图片上传指令，显示图片上传动画，并利用预设编码方式对所述目标图片进行编码，获得目标字符串；
发送模块304，用于向服务端发送图片上传请求，其中，所述图片上传请求包含所述目标字符串；
第一接收模块305，用于在监听到所述图片上传请求成功发送至所述服务端的情况下，移除所述图片上传动画，并接收所述服务端发送的目标地址，其中，所述目标地址为所述服务端接收到所述图片上传请求之后，对所述图片上传请求所包含的所述目标字符串进行解析，获得所述目标图片，将所述目标图片在目标存储位置进行存储时，所述目标存储位置的地址；
引入模块306，用于将所述目标地址引入img标签，获得所述目标图片；
第一显示模块307，用于显示所述目标图片。
可选的，如图4所示，所述图片显示装置还包括：
绑定模块308，用于生成所述目标图片对应的索引，并将所述目标图片与所述目标图片对应的索引进行绑定；
第二接收模块309，用于接收图片删除指令；
确定模块3010，用于确定所述图片删除指令对应的目标索引；
删除模块3011，用于删除与所述目标索引相绑定的图片。
可选的，如图5所示，所述图片显示装置还包括：
第二显示模块3012，用于在监听到所述图片上传请求发送至所述服务端失败的情况下，显示图片上传失败信息。
可选的，如图6所示，所述图片显示装置还包括：
移除模块3013，用于移除所述图片上传动画。
可选的，如图7所示，所述图片显示装置还包括：
判断模块3014，用于根据所述预设参数，判断所述待上传图片是否符合预设格式条件；
执行模块3015，用于在判断出所述待上传图片符合所述预设格式条件的情况下，执行所述根据预设参数对所述待上传图片进行调整，获得目标图片的步骤。
可选的，如图8所示，所述图片显示装置还包括：
封装模块3016，用于在Java Script文件中封装全局方法；
生成模块3017，用于执行所述全局方法，生成所述图片上传控件；
设置模块3018，用于在所述全局方法中设置所述预设参数。
图片显示装置300能够实现图1-图2的方法实施例中图片显示装置实现的各个过程，为避免重复，这里不再赘述。且图片显示装置300可以实现在接收到图片上传指令的情况下，可以根据图片上传指令，利用预设编码方式对目标图片进行编码，获得目标字符串，并向服务端发送包含目标字符串的图片上传请求。在监听到图片上传请求成功发送至服务端的情况下，可以接收服务端发送的目标地址。进而可以将目标地址引入img标签，获得目标图片，并显示目标图片。可以避免使用代码冗余的开源插件，图片显示过程简单。进一步的，在接收到图片删除指令的情况下，可以确定图片删除指令对应的目标索引，进而可以删除与目标索引相绑定的图片。操作过程简单，方便快捷。
图9为本发明实施例提供的电子设备的硬件结构示意图。如图9所示，该电子设备，包括：
存储器901，用于存储程序指令；
处理器902，用于调用并执行所述存储器中的程序指令，以实现上述实施例中所述图片显示方法。具体可以参见前述实施例中的相关描述。
本实施例中，处理器902和存储器901可通过总线或其他方式连接。处理器可以是通用处理器，例如中央处理器、数字信号处理器、专用集成电路，或者被配置成实施本发明实施例的一个或多个集成电路。存储器可以包括易失性存储器，例如随机存取存储器；存储器也可以包括非易失性存储器，例如只读存储器、快闪存储器、硬盘或固态硬盘。
本发明实施例还提供了一种可读存储介质，包括：所述可读存储介质中存储有计算机程序，当图片显示装置的至少一个处理器执行所述计算机程序时，图片显示装置执行上述实施例中所述的图片显示方法。
所述的可读存储介质可为磁碟、光盘、只读存储记忆体(英文：read-only memory，简称：ROM)或随机存储记忆体(英文：random access memory，简称：RAM)等。
本领域的技术人员可以清楚地了解到本发明实施例中的技术可借助软件加必需的通用硬件平台的方式来实现。基于这样的理解，本发明实施例中的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例或者实施例的某些部分所述的方法。
本说明书中各个实施例之间相同相似的部分互相参见即可。尤其，对于图片显示装置、电子设备及可读存储介质实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例中的说明即可。
以上所述的本发明实施方式并不构成对本发明保护范围的限定。
Claims (14)
1.一种图片显示方法，其特征在于，包括：
在接收到对图片上传控件的点击操作的情况下，根据所述点击操作，显示多张图片，并从所述多张图片中选择待上传图片；
根据预设参数对所述待上传图片进行调整，获得目标图片；
在接收到图片上传指令的情况下，根据所述图片上传指令，显示图片上传动画，并利用预设编码方式对所述目标图片进行编码，获得目标字符串；
向服务端发送图片上传请求，其中，所述图片上传请求包含所述目标字符串；
在监听到所述图片上传请求成功发送至所述服务端的情况下，移除所述图片上传动画，并接收所述服务端发送的目标地址，其中，所述目标地址为所述服务端接收到所述图片上传请求之后，对所述图片上传请求所包含的所述目标字符串进行解析，获得所述目标图片，将所述目标图片在目标存储位置进行存储时，所述目标存储位置的地址；
将所述目标地址引入img标签，获得所述目标图片；
显示所述目标图片。
2.如权利要求1所述的方法，其特征在于，在所述显示所述目标图片的步骤之前，所述方法还包括：
生成所述目标图片对应的索引，并将所述目标图片与所述目标图片对应的索引进行绑定；
在所述显示所述目标图片的步骤之后，所述方法还包括：
接收图片删除指令；
确定所述图片删除指令对应的目标索引；
删除与所述目标索引相绑定的图片。
3.如权利要求1或2所述的方法，其特征在于，所述方法还包括：
在监听到所述图片上传请求发送至所述服务端失败的情况下，显示图片上传失败信息。
4.如权利要求3所述的方法，其特征在于，在所述显示图片上传失败信息的步骤之后，所述方法还包括：
移除所述图片上传动画。
5.如权利要求1或2所述的方法，其特征在于，在所述根据预设参数对所述待上传图片进行调整，获得目标图片的步骤之前，所述方法还包括：
根据所述预设参数，判断所述待上传图片是否符合预设格式条件；
在判断出所述待上传图片符合所述预设格式条件的情况下，执行所述根据预设参数对所述待上传图片进行调整，获得目标图片的步骤。
6.如权利要求1或2所述的方法，其特征在于，在所述根据所述点击操作，显示多张图片，并从所述多张图片中选择待上传图片的步骤之前，所述方法还包括：
在Java Script文件中封装全局方法；
执行所述全局方法，生成所述图片上传控件；
在所述全局方法中设置所述预设参数。
7.一种图片显示装置，其特征在于，包括：
选择模块，用于在接收到对图片上传控件的点击操作的情况下，根据所述点击操作，显示多张图片，并从所述多张图片中选择待上传图片；
调整模块，用于根据预设参数对所述待上传图片进行调整，获得目标图片；
编码模块，用于在接收到图片上传指令的情况下，根据所述图片上传指令，显示图片上传动画，并利用预设编码方式对所述目标图片进行编码，获得目标字符串；
发送模块，用于向服务端发送图片上传请求，其中，所述图片上传请求包含所述目标字符串；
第一接收模块，用于在监听到所述图片上传请求成功发送至所述服务端的情况下，移除所述图片上传动画，并接收所述服务端发送的目标地址，其中，所述目标地址为所述服务端接收到所述图片上传请求之后，对所述图片上传请求所包含的所述目标字符串进行解析，获得所述目标图片，将所述目标图片在目标存储位置进行存储时，所述目标存储位置的地址；
引入模块，用于将所述目标地址引入img标签，获得所述目标图片；
第一显示模块，用于显示所述目标图片。
8.如权利要求7所述的图片显示装置，其特征在于，所述图片显示装置还包括：
绑定模块，用于生成所述目标图片对应的索引，并将所述目标图片与所述目标图片对应的索引进行绑定；
第二接收模块，用于接收图片删除指令；
确定模块，用于确定所述图片删除指令对应的目标索引；
删除模块，用于删除与所述目标索引相绑定的图片。
9.如权利要求7或8所述的图片显示装置，其特征在于，所述图片显示装置还包括：
第二显示模块，用于在监听到所述图片上传请求发送至所述服务端失败的情况下，显示图片上传失败信息。
10.如权利要求9所述的图片显示装置，其特征在于，所述图片显示装置还包括：
移除模块，用于移除所述图片上传动画。
11.如权利要求7或8所述的图片显示装置，其特征在于，所述图片显示装置还包括：
判断模块，用于根据所述预设参数，判断所述待上传图片是否符合预设格式条件；
执行模块，用于在判断出所述待上传图片符合所述预设格式条件的情况下，执行所述根据预设参数对所述待上传图片进行调整，获得目标图片的步骤。
12.如权利要求7或8所述的图片显示装置，其特征在于，所述图片显示装置还包括：
封装模块，用于在Java Script文件中封装全局方法；
生成模块，用于执行所述全局方法，生成所述图片上传控件；
设置模块，用于在所述全局方法中设置所述预设参数。
13.一种电子设备，其特征在于，包括：
存储器，用于存储程序指令；
处理器，用于调用并执行所述存储器中的程序指令，以实现权利要求1～6任一项所述的图片显示方法。
14.一种可读存储介质，其特征在于，所述可读存储介质中存储有计算机程序，当图片显示装置的至少一个处理器执行所述计算机程序时，图片显示装置执行权利要求1～6任一项所述的图片显示方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201911415685.5A CN111124234A (zh) | 2019-12-31 | 2019-12-31 | 一种图片显示方法以及图片显示装置 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201911415685.5A CN111124234A (zh) | 2019-12-31 | 2019-12-31 | 一种图片显示方法以及图片显示装置 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN111124234A true CN111124234A (zh) | 2020-05-08 |
Family
ID=70506716
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201911415685.5A Pending CN111124234A (zh) | 2019-12-31 | 2019-12-31 | 一种图片显示方法以及图片显示装置 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111124234A (zh) |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112954030A (zh) * | 2021-01-30 | 2021-06-11 | 北京奇保信安科技有限公司 | 一种Web端图片压缩方法、装置及电子设备 |
| CN112950337A (zh) * | 2021-04-27 | 2021-06-11 | 拉扎斯网络科技（上海）有限公司 | 一种图像处理方法、装置、电子设备以及存储介质 |
| CN113703822A (zh) * | 2021-08-31 | 2021-11-26 | 三一专用汽车有限责任公司 | 一种差分升级方法、装置和作业机械 |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103500186A (zh) * | 2013-09-13 | 2014-01-08 | 北京奇虎科技有限公司 | 一种在浏览器中进行图片加载的方法、装置和浏览器 |
| CN104580297A (zh) * | 2013-10-17 | 2015-04-29 | 腾讯科技（深圳）有限公司 | 图片发送、接收方法及装置 |
| CN106294413A (zh) * | 2015-05-25 | 2017-01-04 | 阿里巴巴集团控股有限公司 | 图片的加载方法和装置 |
| CN107479783A (zh) * | 2017-07-28 | 2017-12-15 | 深圳市元征科技股份有限公司 | 一种图片上传方法及终端 |
| CN109918427A (zh) * | 2019-01-16 | 2019-06-21 | 平安普惠企业管理有限公司 | 图片上传控制方法、装置、计算机设备及存储介质 |
-
2019
- 2019-12-31 CN CN201911415685.5A patent/CN111124234A/zh active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103500186A (zh) * | 2013-09-13 | 2014-01-08 | 北京奇虎科技有限公司 | 一种在浏览器中进行图片加载的方法、装置和浏览器 |
| CN104580297A (zh) * | 2013-10-17 | 2015-04-29 | 腾讯科技（深圳）有限公司 | 图片发送、接收方法及装置 |
| CN106294413A (zh) * | 2015-05-25 | 2017-01-04 | 阿里巴巴集团控股有限公司 | 图片的加载方法和装置 |
| CN107479783A (zh) * | 2017-07-28 | 2017-12-15 | 深圳市元征科技股份有限公司 | 一种图片上传方法及终端 |
| CN109918427A (zh) * | 2019-01-16 | 2019-06-21 | 平安普惠企业管理有限公司 | 图片上传控制方法、装置、计算机设备及存储介质 |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112954030A (zh) * | 2021-01-30 | 2021-06-11 | 北京奇保信安科技有限公司 | 一种Web端图片压缩方法、装置及电子设备 |
| CN112950337A (zh) * | 2021-04-27 | 2021-06-11 | 拉扎斯网络科技（上海）有限公司 | 一种图像处理方法、装置、电子设备以及存储介质 |
| CN113703822A (zh) * | 2021-08-31 | 2021-11-26 | 三一专用汽车有限责任公司 | 一种差分升级方法、装置和作业机械 |
| CN113703822B (zh) * | 2021-08-31 | 2022-11-01 | 三一专用汽车有限责任公司 | 一种差分升级方法、装置和作业机械 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN111124234A (zh) | 一种图片显示方法以及图片显示装置 | |
| US9792354B2 (en) | Context aware user interface parts | |
| CN108415702B (zh) | 一种移动终端应用界面动态渲染方法和装置 | |
| CN110309451B (zh) | 一种web预加载页面的生成方法及装置 | |
| CN105474206A (zh) | 支持按需数据传输的虚拟同步 | |
| CN113239672A (zh) | 目标文件编辑方法及装置、电子设备、存储介质 | |
| CN116954450A (zh) | 针对前端网页的截图方法以及装置、存储介质、终端 | |
| US11729248B2 (en) | Web application component migration to a cloud computing system | |
| CN110365776B (zh) | 图片批量下载方法、装置、电子设备及存储介质 | |
| CN111078529B (zh) | 客户端写入模块测试方法、装置、电子设备 | |
| CN110362305B (zh) | 一种表单组件状态切换方法及装置 | |
| CN109002292B (zh) | 一种基于网页弹出层的弹框实现方法及*** | |
| JP2009237654A (ja) | テストプログラム管理システム | |
| CN115878226A (zh) | 一种h5离线包加载方法及装置 | |
| CN113590564B (zh) | 数据存储方法、装置、电子设备及存储介质 | |
| CN108304169B (zh) | 针对html5应用的实现方法、装置和设备 | |
| Amatya | Cross-platform mobile development: An alternative to native mobile development | |
| CN111782257A (zh) | 应用安装包生成方法及装置、界面显示方法及装置 | |
| CN115202673A (zh) | 基于云服务器的应用构建方法、装置和计算机设备 | |
| CN114168875A (zh) | 一种页面程序的生成方法、装置、计算机设备及存储介质 | |
| CN112035106A (zh) | 同源数据多平台同步方法、装置、介质及电子设备 | |
| CN117111941B (zh) | 组件库添加方法、装置、设备和存储介质 | |
| Rainto | Media file compression application: CASE: Semio | |
| CN118092900A (zh) | 一种组件开发方法、装置、设备及存储介质 | |
| US20130007528A1 (en) | Using reverse time for coverage analysis |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20200508 |