CN109547533A - 一种教育系统的html5移动端图片上传预处理方法及电子设备 - Google Patents

一种教育系统的html5移动端图片上传预处理方法及电子设备 Download PDF

Info

Publication number
CN109547533A
CN109547533A CN201811260969.7A CN201811260969A CN109547533A CN 109547533 A CN109547533 A CN 109547533A CN 201811260969 A CN201811260969 A CN 201811260969A CN 109547533 A CN109547533 A CN 109547533A
Authority
CN
China
Prior art keywords
picture
file
uploaded
upload
uploads
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
Application number
CN201811260969.7A
Other languages
English (en)
Inventor
李天驰
孙悦
罗倩
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Shenzhen Dianmao Technology Co Ltd
Original Assignee
Shenzhen Dianmao Technology Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Shenzhen Dianmao Technology Co Ltd filed Critical Shenzhen Dianmao Technology Co Ltd
Priority to CN201811260969.7A priority Critical patent/CN109547533A/zh
Publication of CN109547533A publication Critical patent/CN109547533A/zh
Pending legal-status Critical Current

Links

Classifications

    • 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/50—Network services
    • H04L67/56—Provisioning of proxy services
    • H04L67/565—Conversion or adaptation of application format or content
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
    • H04L63/00—Network architectures or network communication protocols for network security
    • H04L63/04—Network architectures or network communication protocols for network security for providing a confidential data exchange among entities communicating through data packet networks
    • H04L63/0428—Network architectures or network communication protocols for network security for providing a confidential data exchange among entities communicating through data packet networks wherein the data content is protected, e.g. by encrypting or encapsulating the payload
    • 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]

Landscapes

  • Engineering & Computer Science (AREA)
  • Computer Networks & Wireless Communication (AREA)
  • Signal Processing (AREA)
  • Computer Security & Cryptography (AREA)
  • Computer Hardware Design (AREA)
  • Computing Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Information Transfer Between Computers (AREA)
  • Management, Administration, Business Operations System, And Electronic Commerce (AREA)
  • Telephonic Communication Services (AREA)

Abstract

本发明公开了一种教育系统的html5移动端图片上传预处理方法及电子设备，其中，所述方法包括步骤：A.获取用户点击上传图片的指令，选取相应的图片并上传；B.获取待上传的图片，将图片进行格式转换并加密上传；C.浏览器终端获取到加密文件后，对文件进行解密并按照特定格式上传至服务器，本发明所述方案，能够在图片上传时，加密并进行格式转换，减小上传的内存大小，节省空间，提高上传效率。

Description

一种教育系统的html5移动端图片上传预处理方法及电子 设备
技术领域
本发明涉及移动终端应用领域，尤其涉及一种教育系统的html5移动端图片上传预处理方法及电子设备。
背景技术
在移动端应用中，用户在对文件进行上传时，其中，对于用户上传的图片大小不能控制，可能会上传比较大的图片，消耗流量也非常耗时，同时会导致服务器存储资源的浪费。
因此，现有技术还有待于改进和发展。
发明内容
鉴于上述现有技术的不足，本发明的目的在于提供一种教育系统的html5移动端图片上传预处理方法及电子设备，旨在解决移动端图片上传时的内存处理的问题。
本发明的技术方案如下：
一种教育系统的html5移动端图片上传预处理方法，其中，包括步骤：
A.获取用户点击上传图片的指令，选取相应的图片并上传；
B.获取待上传的图片，将图片进行格式转换并加密上传；
C.浏览器终端获取到加密文件后，对文件进行解密并按照特定格式上传至服务器。
所述的教育系统的html5移动端图片上传预处理方法，其中，
所述步骤A之前还包括：
利用input输入框标签，添加file文件属性制作上传按钮，并设置input标签的accept属性，使用户直接手机图片文件。
所述的教育系统的html5移动端图片上传预处理方法，其中，获取待上传的图片，将图片进行格式转换并加密上传的步骤包括：
监听所述所述上传按钮的change变化事件；
当用户上传图片的动作触发，对图片进行格式转换，并加密后上传。
所述的教育系统的html5移动端图片上传预处理方法，其中，当用户上传图片的动作触发，对图片进行格式转换，并加密后上传的步骤包括：
新建一个File Reader文件读取对象；
调用File Reader文件读取的read AS Data URL方法读取文件内容并将内容编码为base64格式，当File Reader读取到文件内容后，将独处的图片内容生成预览图；
利用canvas的draw Image绘制图像方法将预览图绘制到canvas容器内；
调用canvas的to Data URL接口，将绘制到canvas上的图片进行压缩，传入参数自定义压缩比例。
所述的教育系统的html5移动端图片上传预处理方法，其中，浏览器终端获取到加密文件后，对文件进行解密并按照特定格式上传至服务器的步骤包括：
利用浏览器的全局方法atob解码函数将base64格式的图片文件转换为ArrayBuffer；
将转换后的Array Buffer创建一个blob对象；
采用form Data表单数据的方式将blob对象上传至服务器。
一种电子设备，其中，包括：
包括处理器，适于实现各指令，以及
存储设备，适于存储多条指令，所述指令适于由处理器加载并执行：
获取用户点击上传图片的指令，选取相应的图片并上传；
获取待上传的图片，将图片进行格式转换并加密上传；
浏览器终端获取到加密文件后，对文件进行解密并按照特定格式上传至服务器。
所述的电子设备，其中，所述处理器还用于加载并执行：
利用input输入框标签，添加file文件属性制作上传按钮，并设置input标签的accept属性，使用户直接手机图片文件。
所述的电子设备，其中，所述处理器还用于加载并执行：
监听所述所述上传按钮的change变化事件；
当用户上传图片的动作触发，对图片进行格式转换，并加密后上传。
所述的电子设备，其中，所述处理器还用于加载并执行：
新建一个File Reader文件读取对象；
调用File Reader文件读取的read AS Data URL方法读取文件内容并将内容编码为base64格式，当File Reader读取到文件内容后，将独处的图片内容生成预览图；
利用canvas的draw Image绘制图像方法将预览图绘制到canvas容器内；
调用canvas的to Data URL接口，将绘制到canvas上的图片进行压缩，传入参数自定义压缩比例。
所述的电子设备，其中，所述处理器还用于加载并执行：
利用浏览器的全局方法atob解码函数将base64格式的图片文件转换为ArrayBuffer；
将转换后的Array Buffer创建一个blob对象；
采用form Data表单数据的方式将blob对象上传至服务器。
有益效果：本发明公开了一种教育系统的html5移动端图片上传预处理方法及电子设备，其中，所述方法包括步骤：A.获取用户点击上传图片的指令，选取相应的图片并上传；B.获取待上传的图片，将图片进行格式转换并加密上传；C.浏览器终端获取到加密文件后，对文件进行解密并按照特定格式上传至服务器，本发明所述方案，能够在图片上传时，加密并进行格式转换，减小上传的内存大小，节省空间，提高上传效率。
附图说明
下面将结合附图及实施例对本发明作进一步说明，附图中：
图1为本发明所述教育系统的html5移动端图片上传预处理方法的步骤流程图。
图2为本发明所述电子设备的结构示意图。
具体实施方式
本发明提供一种教育系统的html5移动端图片上传预处理方法及电子设备，为使本发明的目的、技术方案及效果更加清楚、明确，以下对本发明进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。
请参阅图1，为本发明所述教育系统的html5移动端图片上传预处理方法的步骤流程图，本发明公开了一种教育系统的html5移动端图片上传预处理方法，其中，包括步骤：
S1.获取用户点击上传图片的指令，选取相应的图片并上传；
S2.获取待上传的图片，将图片进行格式转换并加密上传；
S3.浏览器终端获取到加密文件后，对文件进行解密并按照特定格式上传至服务器。
进一步的，所述的教育系统的html5移动端图片上传预处理方法，其中，
所述步骤S1之前还包括：
利用input输入框标签，添加file文件属性制作上传按钮，并设置input标签的accept属性，使用户直接手机图片文件。
进一步的，所述的教育系统的html5移动端图片上传预处理方法，其中，所述步骤S2包括：
监听所述所述上传按钮的change变化事件；
当用户上传图片的动作触发，对图片进行格式转换，并加密后上传。
进一步的，所述的教育系统的html5移动端图片上传预处理方法，其中，当用户上传图片的动作触发，对图片进行格式转换，并加密后上传的步骤包括：
新建一个File Reader文件读取对象；
调用File Reader文件读取的read AS Data URL方法读取文件内容并将内容编码为base64格式，当File Reader读取到文件内容后，将独处的图片内容生成预览图；
利用canvas的draw Image绘制图像方法将预览图绘制到canvas容器内；
调用canvas的to Data URL接口，将绘制到canvas上的图片进行压缩，传入参数自定义压缩比例。
进一步的，所述的教育系统的html5移动端图片上传预处理方法，其中，所述步骤S3包括：
利用浏览器的全局方法atob解码函数将base64格式的图片文件转换为ArrayBuffer；
将转换后的Array Buffer创建一个blob对象；
采用form Data表单数据的方式将blob对象上传至服务器。
本发明所述方案，解决效果：
1.提高用户的上传体验，上传时对图片进行压缩处理，减少对用户上传图片的大小要求，并减少用户上传等待的时间。
2.减少上传资源对服务器资源的占用。
进一步的，本发明还公开了一种电子设备10，如图2所示，为所述电子设备的结构示意图，其中，包括：
包括处理器110，适于实现各指令，以及
存储设备120，适于存储多条指令，所述指令适于由处理器110加载并执行：
获取用户点击上传图片的指令，选取相应的图片并上传；
获取待上传的图片，将图片进行格式转换并加密上传；
浏览器终端获取到加密文件后，对文件进行解密并按照特定格式上传至服务器。
所述处理器110可以为通用处理器、数字信号处理器(DSP)、专用集成电路(ASIC)、现场可编程门阵列(FPGA)、单片机、ARM(Acorn RISC Machine)或其它可编程逻辑器件、分立门或晶体管逻辑、分立的硬件组件或者这些部件的任何组合。还有，处理器还可以是任何传统处理器、微处理器或状态机。处理器也可以被实现为计算设备的组合，例如，DSP和微处理器的组合、多个微处理器、一个或多个微处理器结合DSP核、任何其它这种配置。
存储设备120作为一种非易失性计算机可读存储介质，可用于存储非易失性软件程序、非易失性计算机可执行程序以及模块，如本发明实施例中的教育互动方法对应的程序指令。处理器通过运行存储在存储设备中的非易失性软件程序、指令以及单元，从而执行教育互动方法的各种功能应用以及数据处理，即实现上述方法实施例。
进一步的，所述的电子设备，其中，所述处理器110还用于加载并执行：
利用input输入框标签，添加file文件属性制作上传按钮，并设置input标签的accept属性，使用户直接手机图片文件。
进一步的，所述的电子设备，其中，所述处理器110还用于加载并执行：
监听所述所述上传按钮的change变化事件；
当用户上传图片的动作触发，对图片进行格式转换，并加密后上传。
进一步的，所述的电子设备，其中，所述处理器110还用于加载并执行：
新建一个File Reader文件读取对象；
调用File Reader文件读取的read AS Data URL方法读取文件内容并将内容编码为base64格式，当File Reader读取到文件内容后，将独处的图片内容生成预览图；
利用canvas的draw Image绘制图像方法将预览图绘制到canvas容器内；
调用canvas的to Data URL接口，将绘制到canvas上的图片进行压缩，传入参数自定义压缩比例。
进一步的，所述的电子设备，其中，所述处理器110还用于加载并执行：
利用浏览器的全局方法atob解码函数将base64格式的图片文件转换为ArrayBuffer；
将转换后的Array Buffer创建一个blob对象；
采用form Data表单数据的方式将blob对象上传至服务器。
本发明所述方案，解决效果：
1.提高用户的上传体验，上传时对图片进行压缩处理，减少对用户上传图片的大小要求，并减少用户上传等待的时间。
2.减少上传资源对服务器资源的占用。
综上所述，本发明公开了一种教育系统的html5移动端图片上传预处理方法及电子设备，其中，所述方法包括步骤：A.获取用户点击上传图片的指令，选取相应的图片并上传；B.获取待上传的图片，将图片进行格式转换并加密上传；C.浏览器终端获取到加密文件后，对文件进行解密并按照特定格式上传至服务器，本发明所述方案，能够在图片上传时，加密并进行格式转换，减小上传的内存大小，节省空间，提高上传效率。
应当理解的是，本发明的应用不限于上述的举例，对本领域普通技术人员来说，可以根据上述说明加以改进或变换，所有这些改进和变换都应属于本发明所附权利要求的保护范围。

Claims (10)

1.一种教育系统的html5移动端图片上传预处理方法，其特征在于，包括步骤：
A.获取用户点击上传图片的指令，选取相应的图片并上传；
B.获取待上传的图片，将图片进行格式转换并加密上传；
C.浏览器终端获取到加密文件后，对文件进行解密并按照特定格式上传至服务器。
2.根据权利要求1所述的教育系统的html5移动端图片上传预处理方法，其特征在于，
所述步骤A之前还包括：
利用input输入框标签，添加file文件属性制作上传按钮，并设置input标签的accept属性，使用户直接手机图片文件。
3.根据权利要求2所述的教育系统的html5移动端图片上传预处理方法，其特征在于，获取待上传的图片，将图片进行格式转换并加密上传的步骤包括：
监听所述所述上传按钮的change变化事件；
当用户上传图片的动作触发，对图片进行格式转换，并加密后上传。
4.根据权利要求3所述的教育系统的html5移动端图片上传预处理方法，其特征在于，当用户上传图片的动作触发，对图片进行格式转换，并加密后上传的步骤包括：
新建一个File Reader文件读取对象；
调用File Reader文件读取的read AS Data URL方法读取文件内容并将内容编码为base64格式，当File Reader读取到文件内容后，将独处的图片内容生成预览图；
利用canvas的draw Image绘制图像方法将预览图绘制到canvas容器内；
调用canvas的to Data URL接口，将绘制到canvas上的图片进行压缩，传入参数自定义压缩比例。
5.根据权利要求4所述的教育系统的html5移动端图片上传预处理方法，其特征在于，浏览器终端获取到加密文件后，对文件进行解密并按照特定格式上传至服务器的步骤包括：
利用浏览器的全局方法atob解码函数将base64格式的图片文件转换为Array Buffer；
将转换后的Array Buffer创建一个blob对象；
采用form Data表单数据的方式将blob对象上传至服务器。
6.一种电子设备，其特征在于，包括：
包括处理器，适于实现各指令，以及
存储设备，适于存储多条指令，所述指令适于由处理器加载并执行：
获取用户点击上传图片的指令，选取相应的图片并上传；
获取待上传的图片，将图片进行格式转换并加密上传；
浏览器终端获取到加密文件后，对文件进行解密并按照特定格式上传至服务器。
7.根据权利要求6所述的电子设备，其特征在于，所述处理器还用于加载并执行：
利用input输入框标签，添加file文件属性制作上传按钮，并设置input标签的accept属性，使用户直接手机图片文件。
8.根据权利要求7所述的电子设备，其特征在于，所述处理器还用于加载并执行：
监听所述所述上传按钮的change变化事件；
当用户上传图片的动作触发，对图片进行格式转换，并加密后上传。
9.根据权利要求8所述的电子设备，其特征在于，所述处理器还用于加载并执行：
新建一个File Reader文件读取对象；
调用File Reader文件读取的read AS Data URL方法读取文件内容并将内容编码为base64格式，当File Reader读取到文件内容后，将独处的图片内容生成预览图；
利用canvas的draw Image绘制图像方法将预览图绘制到canvas容器内；
调用canvas的to Data URL接口，将绘制到canvas上的图片进行压缩，传入参数自定义压缩比例。
10.根据权利要求9所述的电子设备，其特征在于，所述处理器还用于加载并执行：
利用浏览器的全局方法atob解码函数将base64格式的图片文件转换为Array Buffer；
将转换后的Array Buffer创建一个blob对象；
采用form Data表单数据的方式将blob对象上传至服务器。
CN201811260969.7A 2018-10-26 2018-10-26 一种教育系统的html5移动端图片上传预处理方法及电子设备 Pending CN109547533A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201811260969.7A CN109547533A (zh) 2018-10-26 2018-10-26 一种教育系统的html5移动端图片上传预处理方法及电子设备

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201811260969.7A CN109547533A (zh) 2018-10-26 2018-10-26 一种教育系统的html5移动端图片上传预处理方法及电子设备

Publications (1)

Publication Number Publication Date
CN109547533A true CN109547533A (zh) 2019-03-29

Family

ID=65845288

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201811260969.7A Pending CN109547533A (zh) 2018-10-26 2018-10-26 一种教育系统的html5移动端图片上传预处理方法及电子设备

Country Status (1)

Country Link
CN (1) CN109547533A (zh)

Cited By (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110647703A (zh) * 2019-09-18 2020-01-03 平安科技（深圳）有限公司 动画播放方法、装置、计算机设备和存储介质
CN111104631A (zh) * 2019-11-30 2020-05-05 四川商通实业有限公司 一种Webp图片格式转换方法
CN111627093A (zh) * 2020-05-13 2020-09-04 上海识装信息科技有限公司 一种配置gif信息的方法、装置和电子设备
CN112487396A (zh) * 2020-12-08 2021-03-12 平安国际智慧城市科技股份有限公司 图片的处理方法、装置、计算机设备及存储介质
CN112559228A (zh) * 2019-09-25 2021-03-26 北京国双科技有限公司 数据检测方法和装置、存储介质及电子设备
CN112822228A (zh) * 2019-11-15 2021-05-18 北京中电普华信息技术有限公司 一种基于国密算法的浏览器文件加密上传方法及系统
CN112927312A (zh) * 2019-12-05 2021-06-08 广州凡科互联网科技股份有限公司 一种新型的图片生成方法
CN112954030A (zh) * 2021-01-30 2021-06-11 北京奇保信安科技有限公司 一种Web端图片压缩方法、装置及电子设备

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20140032759A1 (en) * 2011-10-11 2014-01-30 Citrix Systems, Inc. Policy-Based Application Management
CN106027608A (zh) * 2016-05-05 2016-10-12 武汉斗鱼网络科技有限公司 一种图片上传方法、客户端及服务器
CN107766359A (zh) * 2016-08-17 2018-03-06 广州市动景计算机科技有限公司 一种将页面内容转换为图片的方法、装置以及计算设备
CN107872476A (zh) * 2016-09-26 2018-04-03 中国石油化工股份有限公司 图片传输方法及系统

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20140032759A1 (en) * 2011-10-11 2014-01-30 Citrix Systems, Inc. Policy-Based Application Management
CN106027608A (zh) * 2016-05-05 2016-10-12 武汉斗鱼网络科技有限公司 一种图片上传方法、客户端及服务器
CN107766359A (zh) * 2016-08-17 2018-03-06 广州市动景计算机科技有限公司 一种将页面内容转换为图片的方法、装置以及计算设备
CN107872476A (zh) * 2016-09-26 2018-04-03 中国石油化工股份有限公司 图片传输方法及系统

Cited By (10)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110647703A (zh) * 2019-09-18 2020-01-03 平安科技（深圳）有限公司 动画播放方法、装置、计算机设备和存储介质
CN112559228A (zh) * 2019-09-25 2021-03-26 北京国双科技有限公司 数据检测方法和装置、存储介质及电子设备
CN112822228A (zh) * 2019-11-15 2021-05-18 北京中电普华信息技术有限公司 一种基于国密算法的浏览器文件加密上传方法及系统
CN112822228B (zh) * 2019-11-15 2023-05-02 北京中电普华信息技术有限公司 一种基于国密算法的浏览器文件加密上传方法及系统
CN111104631A (zh) * 2019-11-30 2020-05-05 四川商通实业有限公司 一种Webp图片格式转换方法
CN111104631B (zh) * 2019-11-30 2023-06-20 四川商通实业有限公司 一种Webp图片格式转换方法
CN112927312A (zh) * 2019-12-05 2021-06-08 广州凡科互联网科技股份有限公司 一种新型的图片生成方法
CN111627093A (zh) * 2020-05-13 2020-09-04 上海识装信息科技有限公司 一种配置gif信息的方法、装置和电子设备
CN112487396A (zh) * 2020-12-08 2021-03-12 平安国际智慧城市科技股份有限公司 图片的处理方法、装置、计算机设备及存储介质
CN112954030A (zh) * 2021-01-30 2021-06-11 北京奇保信安科技有限公司 一种Web端图片压缩方法、装置及电子设备

Similar Documents

Publication Publication Date Title
CN109547533A (zh) 一种教育系统的html5移动端图片上传预处理方法及电子设备
US9971740B2 (en) Dynamic webpage image
CN104540000B (zh) 一种动态缩略图的生成方法及终端
US20140006921A1 (en) Annotating digital documents using temporal and positional modes
US20190287217A1 (en) Machine learning system for reduced network bandwidth transmission of content
CN105827484B (zh) 一种测试画面同步显示方法及系统
CN101697157A (zh) 电子文件浏览处理方法及系统
US20150116391A1 (en) Method and system to share display attributes of content
EP4258165A1 (en) Two-dimensional code displaying method and apparatus, device, and medium
CN103888817A (zh) 一种将文件上传到智能电视和播放文件的方法及设备
CN103870490A (zh) 一种文件上传的方法及装置
CN202261557U (zh) 数码相机通过无线wifi技术使用云存储的系统
CN109982315A (zh) 日志上传方法及相关设备
CN103544221B (zh) 一种Android系统中视频缩略图的生成方法和系统
CN110647273B (zh) 应用内自定义排版合成长图的方法、装置、设备、介质
CN104123330A (zh) 一种网页图片查看方法及装置
Lu et al. Design and implementation of digital TV widget for Android on multi-core platform
CN116112457A (zh) 消息通知的方法、装置、计算机设备及存储介质
CN110457264A (zh) 会议文件处理方法、装置、设备及计算机可读存储介质
CN101742729A (zh) 一种移动通讯设备终端的rss数据获取系统及方法
CN103414938A (zh) 数字电视一体机内部通讯的控制方法及数字电视一体机
CN110147518A (zh) 本地资源访问方法、本地资源访问装置和电子设备
CN111199141B (zh) 图片处理方法、装置及电子设备
CN102638630B (zh) 数字电视终端、数字电视相片上传系统及方法
CN113099270A (zh) 文件存储方法及解码方法、装置、存储介质、电子装置

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

Application publication date: 20190329

RJ01 Rejection of invention patent application after publication