基于WebWorker的多线程动态在线表单处理系统的制作方法

本发明属于多线程处理领域，涉及web开发技术，具体是基于web worker的多线程动态在线表单处理系统。

背景技术：

1、随着互联网的发展和普及，越来越多的应用需要用户填写在线表单来收集数据；在线表单作为收集数据的重要工具，其应用范围也日益广泛，无论是社交媒体、电子商务、在线办公还是其他各种类型的网站和应用，都需要用户填写在线表单来收集必要的信息；通过在线表单，企业可以轻松地收集客户反馈、市场调研数据和产品评价等重要信息，这些数据可以帮助企业了解市场需求、发现潜在机会和优化产品。

2、但在一些用户需要导入大量或过大文件的情况下，会导致系统主线程的压力增大，从而影响用户体验；为了解决这个问题，现有技术方案是通过使用分片上传方式将文件分成多个部分上传，以减小主线程的压力，然而，这种方案也存在一些缺点；当涉及大量或过大文件的上传时，将文件切分为文件分片的数量就会增加，同时要逐个将切分的文件分片进行上传，这可能会引入额外的性能开销，导致主线程阻塞；每个文件分片都需要单独的http请求和响应，这可能导致上传过程变得更慢；此外，前端需要存储已上传文件分片的信息，由于每个文件存在很多分片，需要在前端进行本地存储以跟踪每个分片的上传状态，这可能导致前端本地存储的开销增加，特别是在处理较大文件时，可能占用大量的浏览器存储空间。

技术实现思路

1、本发明旨在至少解决现有技术中存在的技术问题之一；为此，本发明提出了基于web worker的多线程动态在线表单处理系统，用于解决现有技术中用户导入大量或过大文件会使上传过程变慢，以及前端本地储存的开销增加的技术问题。

2、为实现上述目的，本发明的第一方面提供了基于web worker的多线程动态在线表单处理系统，包括：多线程处理模块，以及与多线程处理模块相连接的数据采集模块和数据传输模块；

3、数据采集模块：获取用户上传的文件，通过javascript在主线程中对选中的文件进行切片，得到文件分片；其中，javascript包括：file api或blob；

4、多线程处理模块：通过主线程创建一个web worker线程并将文件分片传输至webworker；以及，

5、通过对后台线程中接收到的文件分片进行异步处理，得到文件分片的上传进度信息；将文件上传进度信息传输至数据传输模块；其中，异步处理包括：压缩图片、异步上传和并行上传；后台线程是web worker线程；

6、数据传输模块：基于上传进度信息实时更新用户界面的上传进度条；上传完成后通过web worker线程发送上传完成通知至主线程；主线程接收到上传完成通知后通过服务器端的文件合并操作将文件分片进行合并，得到目标文件；以及，

7、将任务完成信息更新至用户界面并通知web worker停止运行，同时释放系统资源；其中，任务完成信息包括：上传成功或已完成上传的文件；系统资源包括：内存或cpu。

8、优选的，所述通过javascript在主线程中对选中的文件进行切片，包括：

9、s1：将input元素的type属性设置为“file”来创建一个文件选择器，通过change事件监听用户的文件选择操作；

10、s2：通过filereader对象来读取文件内容；其中，filereader对象是javascript中的内置对象，用于读取文件内容；

11、s3：基于切片数量通过file api中的slice函数按照预设顺序对文件进行切割。

12、优选的，所述基于切片数量通过file api中的slice函数按照预设顺序对文件进行切割，包括：

13、将文件大小标记为p，切片大小标记为q，通过计算得到切片数量其中是向上取整符号。

14、优选的，所述通过主线程创建一个web worker线程并将文件分片传输至webworker，包括：

15、s1：在主线程中，通过javascript中的worker构造函数创建一个新的worker对象，基于worker对象创建一个web worker线程；其中，worker对象是javascript中的一个内置对象，用于创建并操作web worker线程；

16、s2：通过调用onmessage事件处理函数在worker对象上注册一个消息事件处理程序，用于处理主线程发送给web worker线程的消息；

17、s3：通过调用postmessage函数用于web worker线程向主线程传输信息以及主线程向web worker线程传输信息。

18、现有技术当涉及大量或过大文件的上传时，将文件切分为文件分片的数量就会增加，同时要逐个将切分的文件分片进行上传，然而这些操作都是在主线程中进行，这就可能会导致主线程发生阻塞，从而影响用户体验；

19、本发明通过，通过javascript中的worker构造函数创建一个新的worker对象，基于worker对象创建一个web worker线程作为后台线程；通过将文件分片传输至后台线程进行处理以充分利用浏览器多线程的优势，避免主线程阻塞。

20、优选的，所述压缩图片用于减少文件大小，包括：

21、s1：通过调用blob构造函数将接收到的文件分片转换为一个blob对象；其中，blob对象是表示二进制数据的原始数据对象，用于存储和操作各种类型的数据；

22、s2：利用canvas元素和getcontext函数创建一个绘图上下文对象；通过设置阈值来调整图片尺寸；其中，绘图上下文对象是html5 canvas元素中用于进行绘图操作的javascript对象；

23、s3：通过drawimage函数将图片绘制到canvas元素上，并传入调整后的宽度和高度；其中，canvas是一个在html5中用于在页面上绘制图形、图像和动画的元素；

24、s4：基于toblob函数将canvas元素中的内容转换为blob对象；同时创建一个新的filereader对象，通过readasdataurl函数将blob对象读取为dataurl；其中，dataurl是一种url格式，用于直接嵌入数据，而不是从外部文件载入。

25、本发明通过使用dataurl，可以减少网页的http请求次数，提高网页加载速度，同时也可以方便地在网页中展示一些简单的数据。

26、优选的，所述异步上传用于将上传任务交给后台线程处理，包括：

27、s1：基于web worker线程创建一个xmlhttprequest对象，用于发送异步请求到服务器；其中，xmlhttprequest对象是javascript中用于与服务器进行http通信的api；

28、s2：通过调用formdata.append函数将接收到的文件分片添加到formdata对象中；其中，formdata对象是一个用于构造和发送包含表单数据的键值对的对象；

29、s3：为xmlhttprequest对象中的upload.onprogress属性设置一个回调函数，用于监听上传进度；基于xmlhttprequest对象通过调用open函数打开web worker线程与服务器之间的连接，并通过调用send函数将formdata对象发送给服务器；其中，回调函数包括：onprogress、onload或onerror；

30、s4：通过调用postmessage函数将上传结果或进度信息发送给主线程。

31、优选的，所述并行上传用于同时处理多个文件分片的上传操作，包括：

32、s1：通过调用new promise构造函数为每个文件分片创建一个promise对象，并通过javascript中的数组字面量语法创建一个空数组储存每个文件分片的promise对象；其中储存每个文件分片的promise对象都会执行上传对应文件分片的操作，并监听上传的进度；

33、s2：每个文件分片的promise对象完成上传后，将完成上传的promise对象添加到s1中的数组中；

34、s3：通过调用promise.all函数等待所有文件分片的promise对象都完成上传；以及，通过promise.all函数获取每个文件分片上传成功的数据。

35、需要说明的是，promise对象是javascript中用于处理异步操作的一种机制，表示一个尚未完成，但预计会在将来完成的操作，并且可以用来处理该操作的结果；其中，操作结果包括：成功或失败；promise对象有三种状态：pending(进行中)、fulfilled(已成功)和rejected(已失败)。

36、现有技术中是将文件分片进行逐个上传，然而每个文件分片都需要单独的http请求和响应，这可能导致上传过程变得更慢；

37、本发明通过web worker线程对文件分片进行压缩图片、异步上传和并行上传操作，将所有文件分片同时进行上传，解决了现有技术逐个上传导致上传过程变得更慢的问题。

38、优选的，所述基于上传进度信息实时更新用户界面的上传进度条，包括：

39、基于web worker线程通过使用postmessage函数将上传进度信息发送到主线程；主线程通过调用onmessage事件函数监听获取来自web worker线程的上传进度信息；将接收到的上传进度信息更新进度条的状态。

40、优选的，所述通过服务器端的文件合并操作将文件分片进行合并，包括：

41、根据上传的文件名和类型在服务器端创建一个与原文件相同的空目标文件，用于存储合并后的数据；

42、根据文件切割时的预设顺序依次读取每个文件分片的内容，并将每个文件分片的内容写入空目标文件中。

43、优选的，所述通知web worker停止运行，并释放系统资源，包括：

44、主线程通过调用postmessage函数向web worker发送停止指令；web worker接收到停止指令后，停止当前的任务运行，并释放系统资源。

45、现有技术前端需要存储已上传文件分片的信息，由于每个文件存在很多分片，需要在前端进行本地存储以跟踪每个分片的上传状态，可能导致前端本地存储的开销增加的问题；

46、本发明通过在任务完成后将完成信息更新至用户界面并通知web worker停止运行，以及释放系统资源解决上述问题。

47、与现有技术相比，本发明的有益效果是：

48、1.现有技术当涉及大量或过大文件的上传时，将文件切分为文件分片的数量就会增加，同时要逐个将切分的文件分片进行上传，这可能会引入额外的性能开销，导致主线程阻塞；本发明通过javascript中的worker构造函数创建一个新的worker对象，基于worker对象创建一个web worker线程作为后台线程；通过将文件分片传输至后台线程进行处理以充分利用浏览器多线程的优势，避免主线程阻塞；

49、2.本发明通过web worker线程对文件分片进行压缩图片、异步上传和并行上传操作；同时在任务完成后将完成信息更新至用户界面并通知web worker停止运行，以及释放系统资源；解决了现有技术中每个文件分片都需要单独的http请求和响应，这可能导致上传过程变得更慢；以及前端需要存储已上传文件分片的信息，由于每个文件存在很多分片，需要在前端进行本地存储以跟踪每个分片的上传状态，可能导致前端本地存储的开销增加的问题。