Online file processing method and device, electronic equipment, computer readable storage medium and computer program product

Abstract

The invention provides an online file processing method and device, electronic equipment, a computer readable storage medium and a computer program product. The method comprises the following steps: displaying an online file interface; in response to a file operation instruction received in the online file interface, obtaining attribute information of a target file; converting the attribute information into a character string corresponding to the target file; constructing a virtual document object model based on the character string; creating a canvas corresponding to the target file in a preview area in the online file interface; and rendering on the canvas based on the virtual document object model to form attribute information of the target file. Through the method and the device, the rendering pressure of the online file can be reduced, and the rendering speed is improved.

Description

Technical Field

[0001] The present application relates to computer technology, and in particular to an online file processing method, device, electronic device, computer-readable storage medium and computer program product. Background Art

[0002] When using online files, users often need to upload or download local files so that they can easily share and collaborate on related files. In the process of rendering local files, related technologies often combine the document object model with the canvas to render files. When rendering multiple files, the entire page is refreshed and rendered each time a file is rendered, which consumes too many rendering resources and leads to low rendering efficiency. Summary of the invention

[0003] The embodiments of the present application provide a method, device, electronic device, computer-readable storage medium, and computer program product for processing online files, which can reduce the rendering pressure of online files and improve the rendering speed.

[0004] The technical solution of the embodiment of the present application is implemented as follows:

[0005] The present application provides a method for processing an online file, the method comprising:

[0006] Display the online file interface;

[0007] In response to receiving a file operation instruction in the online file interface, acquiring attribute information of a target file;

[0008] Convert the attribute information into a character string corresponding to the target file;

[0009] Building a virtual document object model based on the character string;

[0010] In the preview area of ​​the online file interface, creating a canvas corresponding to the target file;

[0011] The attribute information of the target file is rendered on the canvas based on the virtual document object model.

[0012] The present application provides an online file processing device, the device comprising:

[0013] An interface display module, used to display the online file interface;

[0014] An information acquisition module, configured to acquire attribute information of a target file in response to receiving a file operation instruction in the online file interface;

[0015] An information conversion module, used for converting the attribute information into a character string corresponding to the target file;

[0016] A data construction module, used for constructing a virtual document object model based on the character string;

[0017] A canvas creation module, used to create a canvas corresponding to the target file in the preview area of ​​the online file interface;

[0018] The information rendering module is used to render the attribute information of the target file on the canvas based on the virtual document object model.

[0019] An embodiment of the present application provides an electronic device, the electronic device comprising:

[0020] A memory for storing computer executable instructions;

[0021] The processor is used to implement the online file processing method provided in the embodiment of the present application when executing the computer executable instructions stored in the memory.

[0022] An embodiment of the present application provides a computer-readable storage medium storing a computer program or computer-executable instructions for implementing the online file processing method provided in the embodiment of the present application when executed by a processor.

[0023] An embodiment of the present application provides a computer program product, including a computer program or computer executable instructions. When the computer program or computer executable instructions are executed by a processor, the online file processing method provided by the embodiment of the present application is implemented.

[0024] The embodiments of the present application have the following beneficial effects:

[0025] By converting the attribute information of the target file obtained from the online file interface into a virtual document object model, the attribute information of the target file is rendered on the canvas corresponding to the preview area of ​​the target file based on the virtual document object model. Compared with the method of refreshing and rendering the entire page of the online file interface every time the attribute information of a target file is rendered, since only the canvas of the preview area needs to be rendered in a targeted manner, the rendering pressure of the online file is significantly reduced, rendering resources are saved, and the rendering efficiency of the online file is improved. BRIEF DESCRIPTION OF THE DRAWINGS

[0026] Figure 1 It is a schematic diagram of the principle of the online file processing method of the related technology provided by the embodiment of the present application;

[0027] Figure 2 is a schematic diagram of the architecture of an online file processing system 100 provided in an embodiment of the present application;

[0028] Figure 3is a schematic diagram of the structure of the terminal 400 provided in an embodiment of the present application;

[0029] Figure 4A It is a first flow chart of the online file processing method provided by an embodiment of the present application;

[0030] Figure 4B is a second flow chart of the online file processing method provided in an embodiment of the present application;

[0031] Figure 4C 3 is a schematic diagram of a third flow chart of the online file processing method provided in an embodiment of the present application;

[0032] Figure 4D is a fourth flow chart of the online file processing method provided in an embodiment of the present application;

[0033] Figure 4E is a fifth flow chart of the online file processing method provided in the embodiment of the present application;

[0034] Figure 4F 6 is a schematic diagram of a sixth flow chart of the online file processing method provided in an embodiment of the present application;

[0035] Figure 4G 7 is a schematic diagram of a seventh flow chart of the online file processing method provided in an embodiment of the present application;

[0036] Figure 4H This is an eighth flow chart of the online file processing method provided in the embodiment of the present application;

[0037] Fig. 4I is a ninth flow chart of the online file processing method provided in an embodiment of the present application;

[0038] Figure 4J is a tenth flow chart of the online file processing method provided in an embodiment of the present application;

[0039] Figure 5A This is a first application schematic diagram of the online file processing method provided in an embodiment of the present application;

[0040] Figure 5B is a second application schematic diagram of the online file processing method provided in an embodiment of the present application;

[0041] Figure 5C is a schematic diagram of updating attribute information by determining an interactive position provided by an embodiment of the present application;

[0042] Figure 6 It is a schematic diagram of the principle of the target recognition algorithm provided in the embodiment of the present application;

[0043] Figure 7is a schematic diagram of an embodiment of the present application in which the overlapping areas of two files are both greater than or equal to an area threshold;

[0044] Figure 8 This is a schematic diagram of inserting a local file provided in an embodiment of the present application;

[0045] Fig. 9 is a schematic diagram of different attachment upload states provided in an embodiment of the present application;

[0046] Fig.10 It is a schematic diagram of different attachments provided in the embodiment of the present application corresponding to different canvases;

[0047] Fig.11 is a schematic diagram of file stacking provided in an embodiment of the present application;

[0048] Fig.12 is a schematic diagram of interacting with a displayed target file provided by an embodiment of the present application;

[0049] Fig.13 This is a schematic diagram of uploading files in a queue manner provided by an embodiment of the present application;

[0050] Fig.14 It is a schematic diagram of file segmentation provided in an embodiment of the present application;

[0051] Fig.15 It is a schematic diagram of the principle of file rendering provided by an embodiment of the present application;

[0052] Fig.16 It is a schematic diagram of the structure of a string of hypertext markup language provided in an embodiment of the present application;

[0053] Fig.17 is a schematic diagram of converting a character string into a virtual document object model provided by an embodiment of the present application;

[0054] Fig.18 is a schematic diagram of the structure of a virtual document object model provided in an embodiment of the present application;

[0055] Fig.19 is a schematic diagram of a rendering attachment provided in an embodiment of the present application;

[0056] Fig. 20 It is a schematic diagram of a real document object model combined with rendering provided in an embodiment of the present application;

[0057] Fig.21 It is a schematic diagram of a virtual document object model combined with rendering provided in an embodiment of the present application;

[0058] Fig. 22 is a schematic diagram of calculating a click range provided in an embodiment of the present application;

[0059] Fig.23 It is a schematic diagram of the accessory stacking provided in an embodiment of the present application.

[0060] It should be pointed out that the above-mentioned "first" and "second" are only used to distinguish different solutions, and do not represent the degree of superiority or inferiority of the solutions or the priority in the implementation process. DETAILED DESCRIPTION

[0061] In order to make the purpose, technical solutions and advantages of the present application clearer, the present application will be further described in detail below in conjunction with the accompanying drawings. The described embodiments should not be regarded as limiting the present application. All other embodiments obtained by ordinary technicians in the field without making creative work are within the scope of protection of this application.

[0062] In the following description, reference is made to “some embodiments”, which describe a subset of all possible embodiments, but it will be understood that “some embodiments” may be the same subset or different subsets of all possible embodiments and may be combined with each other without conflict.

[0063] In the following description, the terms "first / second / third" involved are merely used to distinguish similar objects and do not represent a specific ordering of the objects. It can be understood that "first / second / third" can be interchanged with a specific order or sequence where permitted, so that the embodiments of the present application described herein can be implemented in an order other than that illustrated or described herein.

[0064] In the embodiments of the present application, the term "module" or "unit" refers to a computer program or a part of a computer program with a predetermined function, and works together with other related parts to achieve a predetermined goal, and can be implemented in whole or in part by using software, hardware (such as processing circuits or memories) or a combination thereof. Similarly, a processor (or multiple processors or memories) can be used to implement one or more modules or units. In addition, each module or unit can be part of an overall module or unit that includes the function of the module or unit.

[0065] Unless otherwise specified, at least one mentioned below refers to one or more situations, and "plurality" may refer to two or more situations.

[0066] Unless otherwise defined, all technical and scientific terms used in the embodiments of the present application have the same meanings as those commonly understood by those skilled in the art. The terms used in the embodiments of the present application are only for the purpose of describing the embodiments of the present application and are not intended to limit the present application.

[0067] The relevant data collection and processing in the embodiments of this application should be strictly in accordance with the requirements of relevant laws and regulations when applied in examples, obtain the informed consent or separate consent of the personal information subject, and carry out subsequent data use and processing within the scope of authorization of laws and regulations and the personal information subject.

[0068] Before further describing the embodiments of the present application in detail, the nouns and terms involved in the embodiments of the present application are explained. The nouns and terms involved in the embodiments of the present application are subject to the following interpretations.

[0069] 1) Online files refer to electronic files that are transmitted, stored and shared via the Internet. Online files can be in various formats and types, such as documents, pictures, audio and video. Online files can be converted, edited, stored and shared through various online platforms and services to meet the different needs of users.

[0070] 2) File operation instructions refer to instructions for performing operations on files, such as file upload instructions and file download instructions.

[0071] 3) Attribute information refers to information that reflects the attributes and basic characteristics of the target file. Different types of target files have different attribute information. For example, if the target file type is a document, the attribute information of the document includes the name, size, preview content (a certain page of the document or part of the content in the document, taking the Portable Document Format (PDF) as an example, it can be any page of the PDF or some sections of the PDF), publisher, publishing time, number of characters and number of pages; if the target file type is an image, the attribute information of the image includes the preview content of the image (the complete image), name, size, publisher, publishing time and format; if the target file type is a video, the attribute information of the video includes the preview content of the video (any frame in the video, which can be the first frame or a key frame), name, size, image frame, publisher, publishing time, clarity and format; if the target file type is audio, the attribute information of the audio includes the preview content of the audio (any section of the audio), name, size, publisher, publishing time and format.

[0072] 4) The preview area is an area in the online file interface used to display a preview of the file content. This area will dynamically generate a corresponding visual display based on changes in the file's attribute information. For example, there can be one or more preview areas in the online file interface, and one preview area is used to load a preview control.

[0073] 5) Preview control, which is a control used to display the attribute information of a file in the online file interface, including a preview area and interactive elements for realizing human-computer interaction. For example, an interactive element may refer to a user interface element that realizes the preview function of the attribute information of a file, which is the interface part of the user-computer interaction, and it can respond to the user's operation and perform the corresponding function. The interactive element may be a button, a drop-down menu, a slider or any other interactive element that allows the user to adjust the preview. One file can correspond to one preview control, and the sizes of preview controls of different files can be the same or different. The positional relationship between preview controls of different files can be discrete, connected to each other or stacked, where the stacking can be partial overlap or full overlap.

[0074] 6) Canvas is a virtual surface used in the image rendering process. It can be a mapping of the screen of an electronic device. It defines the viewing angle and range of image rendering. In the rendering process, the canvas plays the role of carrying the final image. In the rendering process, all rendering commands are operated relative to this canvas. For example, in a browser environment, the canvas can be the Canvas element in Hypertext Markup Language (HTML). JavaScript can be used to draw various graphics and images on the Canvas, and perform operations such as interaction and animation effects.

[0075] 7) Parser instance refers to an instance used in a browser environment to parse a string of hypertext markup language into a traversable document object model. A parser can be instantiated into multiple parser instances, and a parser instance corresponds to a target file or a type of target file.

[0076] 8) Interactive operations may include modifying property information (modifying file name or file content), switching property information (from displaying a preview on page 1 to displaying a preview on page 2), deleting property information, scaling the preview area of ​​the target file, flipping the preview area of ​​the target file, or closing the preview control of the target file (restoring the preview control to its original size).

[0077] 9) Overlapping state refers to a state in which the property information in one preview area is partially or completely covered by the property information in another preview area when the preview areas in the preview control at least partially overlap.

[0078] 10) Document Object Model (DOM) is a cross-platform and language-independent interface that allows programs and scripts to dynamically access and update the content, structure, and style of documents. In Web development, DOM is a programming interface that describes structured documents, usually HTML or Extensible Markup Language (XML) files. Through DOM, documents can be decomposed into various operational nodes, each of which represents a part of the document. For example, a text node contains text content, an element node represents an entire HTML element, and an attribute node stores the attribute information of the element.

[0079] 11) Real DOM: It is the DOM element that actually exists in the browser environment. It is composed of HTML and Cascading Style Sheets (CSS). When DOM attachments are added or modified, the entire DOM scene is redrawn to reflect these changes.

[0080] 12) Virtual DOM: It is a JavaScript object converted from the real DOM. It is a representation of the real DOM object and corresponds to the real DOM structure. In the virtual DOM, each DOM node has a corresponding virtual node (VNode), which contains the following information: tag name (such as "div", "span" and "button", etc.), attributes (such as class name, style, event detector, etc.), text content and child nodes (also VNode). When the state of the application changes, a new virtual DOM tree is created and compared with the old virtual DOM tree. This process is called "Diffing", which finds the differences between the two trees and generates a minimized series of operations (patches) that can be converted into minimized updates to the real DOM. These operations may include: adding new nodes, deleting nodes, updating the attributes of existing nodes, and replacing nodes.

[0081] When uploading or downloading target files in the online file interface, refer to Figure 1 , Figure 1 Schematic diagram of the principle of the online file processing method of the related technology provided by the embodiment of the present application. Figure 1 In the related technology, when rendering multiple files uploaded or downloaded in online files, the document object model is often combined with the canvas to render the files. Each time a file is rendered, the entire page is refreshed and rendered, which consumes too many rendering resources.

[0082] Based on the above analysis, the applicant found that the online file processing method of the related art cannot directly and specifically render only the target file through the virtual document object model, resulting in low rendering efficiency. To address the above problems, the embodiments of the present application provide an online file processing method, device, electronic device, computer-readable storage medium and computer program product, which can reduce the rendering pressure of online files and improve the rendering speed.

[0083] The following describes an exemplary application of the electronic device provided by the embodiment of the present application. The electronic device provided by the embodiment of the present application can be implemented as various types of terminals such as a laptop computer, a tablet computer, a desktop computer, a set-top box, a smart phone, a smart speaker, a smart watch, a smart TV, and a vehicle-mounted terminal, and can also be implemented as a server. The following describes an exemplary application when the electronic device is implemented as a terminal.

[0084] See also Figure 2 , Figure 2 It is a schematic diagram of the architecture of the online file processing system 100 provided in an embodiment of the present application. To implement an online file processing application, a terminal (terminal 400-1 and terminal 400-2 are shown as examples) is connected to a server 200 via a network 300. The network 300 may be a wide area network or a local area network, or a combination of the two.

[0085] Taking the online file scenario as an example, terminal 400-1 and terminal 400-2 are used to display the online file interface on the human-computer interaction interface (human-computer interaction interface 410-1 and human-computer interaction interface 410-2 are shown as examples). The same online file can be displayed on the human-computer interaction interface 410-1 of terminal 400-1 and the human-computer interaction interface 410-2 of terminal 410-2. The results of the editing operations of the user of either terminal on the online file can be synchronized to the other terminal through the network 300 and the server 200.

[0086] In some embodiments, the server 200 may be an independent physical server, or a server cluster or distributed system composed of multiple physical servers, or a cloud server that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, content delivery networks (CDN), and big data and artificial intelligence platforms. The terminal and the server may be directly or indirectly connected via wired or wireless communication, which is not limited in the embodiments of the present application.

[0087] The embodiments of the present application can be implemented through artificial intelligence (AI) technology. Artificial intelligence is the theory, method, technology and application system that uses digital computers or machines controlled by digital computers to simulate, extend and expand human intelligence, perceive the environment, acquire knowledge and use knowledge to obtain the best results. In other words, artificial intelligence is a comprehensive technology in computer science that attempts to understand the essence of intelligence and produce a new intelligent machine that can respond in a similar way to human intelligence. Artificial intelligence is to study the design principles and implementation methods of various intelligent machines so that the machines have the functions of perception, reasoning and decision-making.

[0088] Artificial intelligence technology is a comprehensive discipline that covers a wide range of fields, including both hardware-level and software-level technologies. Basic artificial intelligence technologies generally include sensors, dedicated artificial intelligence chips, cloud computing, distributed storage, big data processing technology, pre-trained model technology, operation / interaction systems, mechatronics, etc. Among them, pre-trained models are also called large models and basic models. After fine-tuning, they can be widely used in downstream tasks in various major directions of artificial intelligence. Artificial intelligence software technology mainly includes computer vision technology, speech processing technology, natural language processing technology, and machine learning / deep learning.

[0089] See also Figure 3 , Figure 3 is a schematic diagram of the structure of the terminal 400 provided in an embodiment of the present application, Figure 3 The terminal 400 shown includes: at least one processor 410, a memory 450, at least one network interface 420 and a user interface 430. The various components in the terminal 400 are coupled together via a bus system 440. It is understood that the bus system 440 is used to achieve connection and communication between these components. In addition to the data bus, the bus system 440 also includes a power bus, a control bus and a status signal bus. However, for the sake of clarity, the bus system 440 is not shown in FIG. Figure 3 Various buses are labeled as bus system 440 .

[0090] The processor 410 can be an integrated circuit chip with signal processing capabilities, such as a general-purpose processor, a digital signal processor (DSP), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc., where the general-purpose processor can be a microprocessor or any conventional processor, etc.

[0091] The user interface 430 includes one or more output devices 431 that enable presentation of media content, including one or more speakers and / or one or more visual display screens. The user interface 430 also includes one or more input devices 432, including user interface components that facilitate user input, such as a keyboard, mouse, microphone, touch screen display, camera, other input buttons and controls.

[0092] The memory 450 may be removable, non-removable, or a combination thereof. Exemplary hardware devices include solid-state memory, hard disk drives, optical disk drives, etc. The memory 450 may optionally include one or more storage devices that are physically remote from the processor 410.

[0093] The memory 450 includes a volatile memory or a non-volatile memory, and may also include both volatile and non-volatile memories. The non-volatile memory may be a read-only memory (ROM), and the volatile memory may be a random access memory (RAM). The memory 450 described in the embodiments of the present application is intended to include any suitable type of memory.

[0094] In some embodiments, memory 450 can store data to support various operations, examples of which include programs, modules, and data structures, or a subset or superset thereof, as exemplarily described below.

[0095] Operating system 451, including system programs for processing various basic system services and performing hardware-related tasks, such as a framework layer, a core library layer, a driver layer, etc., for implementing various basic services and processing hardware-based tasks;

[0096] A network communication module 452, used to reach other electronic devices via one or more (wired or wireless) network interfaces 420, exemplary network interfaces 420 include: Bluetooth, Wireless Compatibility Certification (WiFi), and Universal Serial Bus (USB), etc.;

[0097] a presentation module 453 for enabling presentation of information via one or more output devices 431 (e.g., display screen, speaker, etc.) associated with the user interface 430 (e.g., a user interface for operating peripherals and displaying content and information);

[0098] The input processing module 454 is used to detect one or more user inputs or interactions from one of the one or more input devices 432 and translate the detected inputs or interactions.

[0099] In some embodiments, the device provided in the embodiments of the present application can be implemented in software. Figure 3 The processing device 455 of the online file stored in the memory 450 is shown, which can be software in the form of a program and a plug-in, etc., including the following software modules: an interface display module 4551, an information acquisition module 4552, an information conversion module 4553, a data construction module 4554, a canvas creation module 4555 and an information rendering module 4556. These modules are logical, so they can be arbitrarily combined or further split according to the functions implemented. The functions of each module will be explained below.

[0100] In some embodiments, the terminal or server can implement the online file processing method provided by the embodiment of the present application by running various computer executable instructions or computer programs. For example, computer executable instructions can be commands, machine instructions or software instructions at the microprogram level. The computer program can be a native program or software module in the operating system; it can be a local (Native) application (APPlication, APP), that is, a program that needs to be installed in the operating system to run, such as a document APP or an instant messaging APP; it can also be a small program that can be embedded in any APP, that is, a program that can be run only by downloading it to a browser environment. In short, the above-mentioned computer executable instructions can be instructions in any form, and the above-mentioned computer program can be an application, module or plug-in in any form.

[0101] The online file processing method provided in the embodiment of the present application will be described in combination with the exemplary application and implementation of the terminal provided in the embodiment of the present application.

[0102] See also Figure 4A , Figure 4A This is a first flow chart of the online file processing method provided by the embodiment of the present application, which takes the terminal as the main body and combines Figure 4A The steps shown are explained.

[0103] In step 101, an online file interface is displayed.

[0104] In some embodiments, the online file interface can be displayed in the browser environment of the online file APP, in the browser, or in the mini-program of the instant messaging APP, and the mini-program loads the online file interface through the browser environment.

[0105] For example, see Figure 5A , Figure 5A 1 is a first application diagram of the online file processing method provided in the embodiment of the present application. Figure 5A In the left figure of , an online file interface 401 is displayed.

[0106] In step 102, in response to receiving a file operation instruction in the online file interface, attribute information of the target file is obtained.

[0107] In some embodiments, the file operation instruction may be a file upload instruction or a file download instruction, and the type of the target file may be a document, a picture, a video or an audio, wherein the document may be a text document represented by a word processor application (Word) document, a table document represented by a table (Excel) document, a presentation document represented by a presentation (PPT, Power PoinT) document or a portable document format.

[0108] For example, taking the target file type as a document, the document's attribute information includes the document's name, size, content, publisher, publishing time, number of characters and number of pages; taking the target file type as a picture, the picture's attribute information includes the picture document's name, size, publisher, publishing time and format; taking the target file type as a video, the video's attribute information includes the video's name, size, image frame, publisher, publishing time, clarity and format; taking the target file type as audio, the audio's attribute information includes the audio's name, size, publisher, publishing time and format.

[0109] In some embodiments, the online file interface includes a file upload control and a file download control, and the file operation instructions include a file upload instruction and a file download instruction.

[0110] In some embodiments, see Figure 4B , Figure 4B It is a second flow chart of the online file processing method provided in an embodiment of the present application. Figure 4A Step 102 can be Figure 4B Steps 1021 to 1022 are implemented as described in detail below.

[0111] In step 1021, in response to a file upload instruction for a file upload control, attribute information of at least one first target file to be uploaded is obtained.

[0112] For example, Figure 5A In the left figure of FIG. 4 , the online file interface 401 includes a file upload control 402. In response to a trigger operation on the file upload control 402, the trigger operation is identified as a file upload instruction for the file upload control 402. Figure 5A In the middle figure, a file selection interface 403 is displayed, and in response to a selection operation for at least one first target file to be uploaded, such as a first target file 404, a first target file 405, and a first target file 406, attribute information of at least one first target file to be uploaded is obtained.

[0113] For example, in response to a file upload instruction for a file upload control, the attribute information of the first target file is obtained by parsing the metadata carried in at least one first target file to be uploaded. The type of the target file can be a document, a picture, a video or an audio, wherein the document can be Word, Excel, PPT or PDF. Taking the type of the target file as a document as an example, the attribute information of the document includes the name, size, content, publisher, publishing time, number of characters and number of pages of the document; taking the type of the target file as a picture as an example, the attribute information of the picture includes the name, size, publisher, publishing time and format of the picture document; taking the type of the target file as a video as an example, the attribute information of the video includes the name, size, image frame, publisher, publishing time, clarity and format of the video; taking the type of the target file as an audio as an example, the attribute information of the audio includes the name, size, publisher, publishing time and format of the audio.

[0114] In step 1022, in response to the file download instruction for the file download control, attribute information of at least one second target file to be downloaded is obtained.

[0115] For example, see Figure 5B , Figure 5B 2 is a schematic diagram of a second application of the online file processing method provided in the embodiment of the present application. Figure 5B In the left figure of FIG. 4 , the online file interface 401 includes a file download control 411. In response to a trigger operation on the file download control 411, the trigger operation is identified as a file download instruction for the file download control 411. Figure 5B In the right figure of , attribute information of at least one second target file to be downloaded, such as attribute information of the second target file 412, is obtained.

[0116] In some embodiments, when there are multiple target files, the above step 102 can also be implemented by performing the following operations: dividing a specific target file among the multiple target files whose volume exceeds a volume threshold into multiple sub-files; in response to a failure to obtain attribute information of any sub-file in the specific target file, recording the acquisition position of the sub-file that failed to be obtained in the specific target file corresponding to the sub-file; and re-acquiring the attribute information of the remaining sub-files in the specific target file in a specific order starting from the acquisition position.

[0117] For example, the volume threshold is 500 megabytes. If the volume of the specific target file is 1200 megabytes, the specific target file can be divided into three sub-files with a volume of 400 megabytes, which are arranged as sub-file 1, sub-file 2 and sub-file 3 in the order of division time. In response to the failure to obtain the attribute information of sub-file 2 (the attribute information of sub-file 1 has been successfully obtained at this time), the acquisition position of sub-file 2 that failed to be obtained in the specific target file is recorded, that is, the second position; starting from the second position, the attribute information of sub-file 2 and sub-file 3 is re-obtained.

[0118] The embodiment of the present application divides an overly large target file into multiple sub-files, and determines the position of the sub-file in the target file where retrieval fails, and starts from this position and re-retrieves the sub-files in a specific order, so that the overly large file can be uploaded or downloaded in blocks, thereby ensuring the smoothness of file processing. At the same time, re-retrieval at the place where retrieval failed avoids repeated processing of processed files, reduces memory usage, and improves processing efficiency.

[0119] In some embodiments, when uploading or downloading a target file, a quantity threshold or a volume threshold is set to obtain attribute information of the target file with the quantity threshold, or to obtain attribute information of the target file with a quantity less than or equal to the volume threshold.

[0120] For example, if there are multiple target files, such as target files t1, t2, t3, and t4, and if the number threshold is 3, then the attribute information of any three target files among target files t1, t2, t3, and t4 is obtained. If the volume threshold is 500 megabytes, the volume of target file t1 is 200 megabytes, the volume of target file t2 is 300 megabytes, the volume of target file t3 is 600 megabytes, and the volume of target file t4 is 800 megabytes, then the attribute information of target file t1 and the attribute information of target file t2 are obtained.

[0121] The embodiment of the present application sets a quantity threshold and a volume threshold to ensure that resources are occupied within a preset range when files are uploaded or downloaded, thereby avoiding an instantaneous surge in traffic due to an excessive number or large volume of target files, and alleviating rendering pressure.

[0122] Continue to see Figure 4A In step 103, the attribute information is converted into a character string corresponding to the target file.

[0123] In some embodiments, see Figure 4C , Figure 4C This is a third flow chart of the online file processing method provided in an embodiment of the present application. Figure 4A Step 103 can be Figure 4C Steps 1031 to 1033 are implemented as described in detail below.

[0124] In step 1031, a parser instance in a browser environment is created, wherein the online file interface runs in the browser environment.

[0125] In some embodiments, the parser instance is a tool for parsing attribute information, and the online file interface can run in a browser, or any APP with a built-in browser environment, such as an instant messaging APP.

[0126] In step 1032, the attribute information is parsed by the parser instance to obtain a file object.

[0127] In some embodiments, attribute information is parsed by a parser instance to obtain parsed information, wherein the parsed information includes a file object, and the text object is stored in a tree structure.

[0128] For example, the parser instance first performs lexical analysis on the attribute information and decomposes the attribute information into a series of tokens, which may be keywords, identifiers or symbols; then, the parser instance organizes these tokens into high-level structures, such as expressions or statements, according to predefined grammatical rules; during the parsing process, the parser instance creates tree-structured nodes according to the grammatical rules, each node represents an element in the attribute information, and establishes parent-child relationships between nodes to form a hierarchical structure; the parser instance identifies node attributes, and the attributes are stored in the corresponding nodes, usually in the form of key-value pairs, and the parsed nodes are combined into a tree structure as a text object.

[0129] In step 1033, a character string corresponding to the target file is generated based on the file object, wherein when there are multiple target files, one character string corresponds to one target file.

[0130] In some embodiments, when there are multiple target files, one target file corresponds to one string, that is, one target file corresponds to one file object.

[0131] In some embodiments, the file object includes a root element and a plurality of child elements subordinate to the root element, see Figure 4D , Figure 4D This is a fourth flow chart of the online file processing method provided in an embodiment of the present application. Figure 4C Step 1033 "Generate a string corresponding to the target file based on the file object" can be achieved by Figure 4D Steps 10331 to 10332 are implemented as described in detail below.

[0132] In step 10331, the sub-elements in the file object are traversed downward from the root element, and according to the type of the traversed sub-element, a hypertext markup language code corresponding to the traversed sub-element is generated.

[0133] In some embodiments, different types of child elements will generate different hypertext markup language codes. The child elements in the file object can be traversed in sequence starting from the root element through pre-order traversal. Pre-order traversal is a tree traversal method that visits each node in the rendering tree in the order of "root node-left subtree-right subtree". This traversal method first visits the root element, then recursively traverses the left subtree, and finally recursively traverses the right subtree.

[0134] In step 10332, the hypertext markup language code corresponding to the root element and the hypertext markup language codes corresponding to the plurality of sub-elements are combined into a character string corresponding to the target file.

[0135] For example, if the root element corresponds to the HTML code , below a is used to represent The number of sub-elements is 6, and the corresponding hypertext markup language codes of the 6 sub-elements are <style>、、、<button>、< / style> and , hereinafter referred to as b <style>，c表示，d表示，e表示<button>，f表示< / style> , g represents , the string corresponding to the target file is a+b+c+d+e+f+g.

[0136] Continue to see Figure 4A In step 104, a virtual document object model is constructed based on the character string.

[0137] In some embodiments, the string includes a plurality of characters, the plurality of characters including a tag name, see Figure 4E , Figure 4E This is a fifth flow chart of the online file processing method provided in the embodiment of the present application. Figure 4A Step 104 can be Figure 4E Steps 1041 to 1043 are implemented as described in detail below.

[0138] In step 1041 , the string is traversed, and a plurality of characters in the string are read based on the traversal order.

[0139] Continuing with the example of step 10332 above, the string a+b+c+d+e+f+g is traversed, and multiple characters a, b, c, d, e, f and g in the string are read based on the traversal order.

[0140] In step 1042, a plurality of nodes are generated based on the tag name in the plurality of characters.

[0141] Continuing with the example of step 1041 above, if a, b, c, d, and e are label names among the multiple characters, then a, b, c, d, and e are treated as multiple nodes.

[0142] In step 1043, multiple nodes are combined into a virtual document object model corresponding to the target file in the order of generation, wherein, when there are multiple target files, a character string of one target file corresponds to one virtual document object model.

[0143] Following the example of step 1042 above, node a is used as the root node, and nodes b, c, d and e are used as four child nodes subordinate to the root node a to serve as the virtual document object model corresponding to the target file.

[0144] In some embodiments, when there are multiple target files, the following processing is performed for the character string corresponding to the attribute information of each target file: traverse the character string and read multiple characters in the character string based on the traversal order; generate multiple nodes based on the tag names in the multiple characters; and combine the multiple nodes into a virtual document object model corresponding to the target file in the order of generation.

[0145] In some embodiments, the plurality of characters further include a termination character, and the plurality of nodes include a root node and a plurality of child nodes subordinate to the root node, see Figure 4F , Figure 4F This is a sixth flow chart of the online file processing method provided in an embodiment of the present application. Figure 4A Step 1043 of "combining multiple nodes into a virtual document object model corresponding to the target file in the order of generation" can be performed by Figure 4F Steps 10431 to 10434 are implemented as described in detail below.

[0146] In step 10431, the first tag name in the string is used as the root node.

[0147] Continuing with the example of step 1042 above, a is the first label name in the string a+b+c+d+e+f+g, and a is taken as the root node.

[0148] In step 10432, the tag name between the first tag name and the termination character corresponding to the first tag name is taken as the first child node directly subordinate to the root node.

[0149] In some embodiments, the first child node may be directly subordinate to the root node, or may be indirectly subordinate to the root node, that is, the first child node may be a child node of a child node of the root node.

[0150] Continuing with the example of step 10431 above, if g is the termination character corresponding to the first label name a, then b, c, d and e are the first child nodes subordinate to the root node, wherein the first child node may be directly subordinate to the root node or indirectly subordinate to the root node.

[0151] In step 10433, the tag name between the second tag name and the termination symbol corresponding to the second tag name is used as the second child node directly subordinate to the child node corresponding to the second tag name, wherein the second tag name is any one of the tag names corresponding to multiple characters that is different from the first tag name.

[0152] Continuing with the example of step 10431 above, if the tag name b is the second tag name, and f is the termination character corresponding to the second tag name b, c, d, and e are taken as second child nodes directly subordinate to the child node corresponding to the second tag name.

[0153] In step 10434, the root node, the first child node, and the second child node are combined into a virtual document object model corresponding to the target file according to a subordinate relationship.

[0154] Continuing with the example of steps 10431 to 10433 above, among the first child nodes b, c, d and e, the first child node b is directly subordinate to the root node a, and nodes c, d and e are indirectly subordinate to the root node a and directly subordinate to node b. Therefore, the virtual document object model corresponding to the target file can be expressed as abcde.

[0155] In some embodiments, the online file interface runs in a browser environment, and the browser environment includes multiple parser instances. The above step 104 can also be implemented by performing the following operations: if there are multiple target files, then according to the type of the target file or the number of target files, multiple parser instances are created in the browser environment, and multiple parser instances are called to build a virtual document object model based on the string, wherein one parser instance corresponds to one target file or one type of target file.

[0156] In some embodiments, the online file interface runs in a browser, or any APP with a built-in browser environment, such as an instant messaging APP. If there is only one target file, a parser instance is created and the parser instance is called to build a virtual document object model based on the string.

[0157] In some embodiments, the above-mentioned "creating multiple parser instances in the browser environment according to the type of target files or the number of target files" can be achieved by performing the following operations: for each target file, creating a parser instance corresponding to each target file in the browser environment; or for each type of target file, creating a parser instance corresponding to each type in the browser environment.

[0158] For example, if the number of target files is 3, 3 parser instances corresponding to the target files can be created, and the 3 parser instances can be called to build a virtual document object model based on the string; if the 3 target files have 2 types in total, 2 parser instances corresponding to the types of the target files can also be created, and the 2 parser instances can be called to build a virtual document object model based on the string.

[0159] The embodiment of the present application creates a parser instance corresponding to the target file or the type of the target file according to the number or type of the target files to build a virtual document object model, so that different target files or different types of target files can be processed in parallel in different parser instances, thereby improving the file processing efficiency.

[0160] Continue to see Figure 4A In step 105, a canvas corresponding to the target file is created in the preview area of ​​the online file interface.

[0161] In some embodiments, if there are multiple target files, the total area occupied by the preview controls of the multiple target files in the online file interface is used as the preview area, and the area occupied by the preview control of each target file in the online file interface is used as the canvas.

[0162] In some embodiments, see Figure 4G , Figure 4G This is the seventh flow chart of the online file processing method provided in the embodiment of the present application. Figure 4A Step 105 can be Figure 4G Steps 1051 to 1052 are implemented as described in detail below.

[0163] In step 1051 , the size of the preview control of the target file is determined, wherein the preview area of ​​the target file is located in the preview control of the target file. When there are multiple target files, one target file corresponds to one preview control.

[0164] In some embodiments, see Figure 4H , Figure 4H This is the eighth flow chart of the online file processing method provided in the embodiment of the present application. Figure 4G Step 1051 can be Figure 4H Steps 10511 to 10514 are implemented as described in detail below.

[0165] In step 10511, if the type of the target file is a document, a portion of the content of the document is obtained, and the size of the portion of the content is proportionally reduced to obtain the size of the preview control of the target file.

[0166] In some embodiments, the size of the content of any page of the document can be used as the size of the preview control of the target file. The size of a portion of the content of any page can also be intercepted as the size of the preview control of the target file, where the portion of the content can be representative content in the document, such as illustrations, abstracts, etc., and the representative content can be obtained through natural language processing and text analysis.

[0167] Take the PDF document as an example, obtain the content of any page of the PDF as part of the document content, and reduce the size of any page proportionally to obtain the size of the preview control of the target file. For example, the size of the first page is 20cm*80cm, and the size of the first page is proportionally reduced by a preset multiple, such as 10 times. The size after proportional reduction is 2cm*8cm, and the size of the preview control of the target file is 2cm*8cm; the sizes of several paragraphs of text in the PDF can be proportionally reduced to obtain the size of the preview control of the target file. For example, the size of three paragraphs of text is 10cm*20cm, and the size of three paragraphs of text is proportionally reduced. The size of the preview control of the target file is 5cm*10cm after the reduction by a preset multiple, for example, 2 times. The size after the reduction is 5cm*10cm, and the size of the preview control of the target file is 5cm*10cm. Keyword extraction and sentiment analysis can also be performed, and then representative content is screened out according to the sentiment score and keyword importance, and the size of the representative content is proportionally reduced to obtain the size of the preview control of the target file. For example, the size of the representative content is 10cm*15cm. The size of the representative content is proportionally reduced by a preset multiple, for example, 5 times, and the size after the reduction is 2cm*3cm. The size of the preview control of the target file is 2cm*3cm.

[0168] In step 10512, if the type of the target file is a video, the size of the image frame in the video is obtained, and the size of the image frame is proportionally reduced to obtain the size of the preview control of the target file.

[0169] For example, if the size of the image frame of the video is 40cm*50cm, the size of the image frame is proportionally reduced by a preset multiple, such as 10 times, that is, the size of the image frame is proportionally reduced to 4cm*5cm, and the size of the preview control of the target file is 4cm*5cm.

[0170] In some embodiments, the image frame may be the first frame of the video, the last frame of a portion viewed when the video was last viewed, or a key frame in the video.

[0171] For example, taking the image frame as the key frame of the video, the key frame can be obtained through the following operations: the machine learning model can be trained to identify the key frame, for example, multiple image frame samples are obtained, and a true label is added to each image frame sample, the true label represents whether the image frame sample is a key frame, the machine learning model is called based on the image frame sample, and the predicted label is obtained, the difference between the true label and the predicted label is calculated as the loss value, the loss value is back-propagated, the parameters of the machine learning model are updated, and the process of calculating the loss value and updating the parameters is iterated multiple times until the loss value no longer increases or decreases, the iterative process is stopped, and the trained machine learning model is obtained, and multiple image frames of the video are used as input and input into the trained machine learning model in sequence to obtain the predicted label of each image frame, and the image frame whose predicted label represents the key frame is selected.

[0172] For example, the loss function may be a mean square error loss function, a cross entropy loss function, a multi-label classification loss function, and a triplet loss function.

[0173] For example, back propagation is implemented through the back propagation algorithm, which calculates the gradient of each neuron from the output layer to the input layer, and updates the weight and bias of the neuron according to the gradient, and continuously updates the parameters by gradient descent to reduce the loss value. Gradient descent can use various gradient descent algorithms, such as batch gradient descent algorithm, stochastic gradient descent algorithm, adaptive gradient descent algorithm and momentum gradient descent algorithm.

[0174] In step 10513, if the type of the target file is audio, the preset size is used as the size of the preview control of the target file.

[0175] In some embodiments, for all target files of audio type, a preset size is used as the size of the preview control of the target file. The preset size may be the size of a preset picture used to display metadata of the target file.

[0176] For example, if the preset size is 2cm*5cm, the size of the preview control of the target file is 2cm*5cm. The preset image can ensure that typical metadata of the audio is displayed, such as duration, encoding method, and sampling rate.

[0177] In step 10514, if the type of the target file is a picture, the size of the picture is reduced proportionally to obtain the size of the preview control of the target file.

[0178] In some embodiments, the size of the entire image can be proportionally reduced to obtain the size of the preview control of the target file, and a portion of the image can be captured and the size of the portion of the image can be proportionally reduced to obtain the size of the preview control of the target file, wherein the portion of the image can be a partial area of ​​the image that includes a key object.

[0179] For example, if the size of the entire image is 40cm*50cm, the size of the entire image is proportionally reduced by a preset multiple, such as 10 times, that is, the size of the entire image is proportionally reduced to 4cm*5cm, and the size of the preview control of the target file is 4cm*5cm. Or if a part of the image is captured, if the size of the part of the image is 20cm*30cm, the size of the part of the image is proportionally reduced by a preset multiple, such as 10 times, that is, the size of the part of the image is proportionally reduced to 4cm*5cm, and the size of the preview control of the target file is 4cm*5cm.

[0180] For example, the part of the picture including the key object can be determined by using an object recognition algorithm, such as an object recognition algorithm based on a support vector machine, an object recognition algorithm based on naive Bayes, and an object recognition algorithm based on a neural network. Figure 6 , Figure 6 It is a schematic diagram of the principle of the target recognition algorithm provided by the embodiment of the present application. The picture is input into the deep convolutional neural network (Deep ConvNet) to obtain the feature map of the picture. Feature mapping is performed according to the coordinate mapping relationship between the candidate area and the overall image, and the feature matrix of each candidate area can be obtained. Each feature matrix is ​​passed through a pooling layer, pooled to a fixed size, and then flattened into a vector. After passing through two fully connected layers, a candidate feature vector is obtained. Finally, the feature vector passes through a fully connected layer to obtain the position of the bounding box of the key object, and the picture is cut out based on the bounding box to obtain a partial picture including the key object in the picture.

[0181] Continue to see Figure 4G In step 1052, a canvas corresponding to the target file is created in a preview area of ​​the online file interface based on the size, wherein the preview area is an area in the online file interface for loading preview controls.

[0182] In some embodiments, if the number of target files is one, the size of the preview area is the same as the size of the preview control of the target file; if the number of target files is multiple, one target file corresponds to one preview area, and one preview area is used to load one preview control, and the preview control includes the preview area and interactive elements for realizing human-computer interaction.

[0183] For different types of target files, the embodiment of the present application uses different picture sizes as the size of the canvas corresponding to the target file, so that different types of target files can be displayed differently, ensuring the uniqueness of the display of different types of files and enhancing the recognition of the file type.

[0184] Continue to see Figure 4AIn step 106, attribute information of the target file is rendered on the canvas based on the virtual document object model.

[0185] For example, Figure 5A In the right side figure, the virtual document object model corresponding to the target file 404 is rendered on the canvas 407 corresponding to the target file 404 to form the attribute information of the target file 404, the virtual document object model corresponding to the target file 405 is rendered on the canvas 408 corresponding to the target file 405 to form the attribute information of the target file 405, and the virtual document object model corresponding to the target file 406 is rendered on the canvas 409 corresponding to the target file 406 to form the attribute information of the target file 406.

[0186] In some embodiments, the virtual document object model includes a plurality of nodes, the plurality of nodes include a root node and a plurality of child nodes subordinate to the root node, the character string includes a plurality of characters, and one node corresponds to one character. The above step 106 can be implemented by performing the following operations: starting from the root node, traversing the child nodes in the virtual document object model downward, querying the target character corresponding to the traversed child node, and rendering the attribute information corresponding to the target character onto the canvas, wherein, when the number of target files is multiple, one virtual document object model is rendered to form the attribute information of one target file.

[0187] For example, following the example of step 104, the virtual document object model corresponding to the target file can be represented as abcde, where a is the root node, b, c, d and e are multiple child nodes subordinate to the root node, and each node in the virtual document object model corresponds to a character in the string a+b+c+d+e+f+g. Starting from the root node a, the child nodes b, c, d and e in the virtual document object model are traversed downward, and the target characters corresponding to the traversed child nodes are queried, that is, the characters b, c, d and e in the string, and the attribute information corresponding to the target characters is rendered on the canvas to form the attribute information of the target file on the canvas.

[0188] In some embodiments, when there are multiple target files, the above step 106 can also be implemented by performing the following operations: in a specific order of the multiple target files, for each target file among the multiple target files, based on the virtual document object model corresponding to the target file, rendering the attribute information of the target file on the canvas corresponding to the target file.

[0189] For example, in response to upload or download operations for multiple target files, the multiple target files are stored in a queue in ascending order, and are retrieved from the queue in sequence in ascending order, and based on the virtual document object models corresponding to the target files, the attribute information of the target files is rendered on the canvas corresponding to the target files.

[0190] In some embodiments, see Fig. 4I , Fig. 4I is a ninth flow chart of the online file processing method provided in the embodiment of the present application. After step 106, execute Fig. 4I Steps 201 to 203 are described in detail below.

[0191] In step 201, in response to an interactive operation on attribute information of a target file, updated attribute information of the target file is determined according to the interactive operation.

[0192] In some embodiments, the preview control includes at least one interactive element, one interactive element corresponds to an interactive operation, and the interactive element can be a toggle control, a close control, and a flip control in the preview control. After receiving the click event, the event processing mechanism is used to identify the position of the click event, and the position of the preview control and the position of the interactive element are combined to determine the triggered interactive element, and the interactive operation corresponding to the triggered interactive element is performed. In the case where there are multiple preview controls, the position relationship between the position of the click event and the positions of the multiple preview controls is determined, wherein the position relationship represents whether the position of the click event is within or outside the bounding box of the preview control; in response to the position of the click event being within the bounding box of the target preview control, the position relationship between the position of the click event and the positions of the multiple interactive elements in the target preview control is determined; in response to the position of the click event being within the bounding box of the target interactive element of the target preview control, the triggered target interactive element is determined, and the interactive operation corresponding to the triggered target interactive element is performed.

[0193] For example, the interactive operation may be an operation to modify the property information of the target file. For example, in response to the modification operation on the property information of the target file, the content or file name of the target file is modified to obtain updated property information of the target file. The interactive operation may be an operation to switch the property information. For example, the preview control of the target file includes a switch control. Taking the target file as a PDF, for example, in response to a trigger operation on the switch control, the display of the content of the first page of the PDF is switched to the display of the content of the second page, and the switched property information is used as the updated property information of the target file. The interactive operation may be an operation to delete the property information. For example, in response to a deletion operation on part of the content of the target file, the content of the target file is deleted. The interactive operation may be a zoom operation on the preview area, and in response to the zoom operation on the preview area, the updated property information of the target file is obtained; the interactive operation may be a flip operation on the preview area, for example, the preview control of the target file includes a flip control, and in response to the triggering operation on the flip control, the preview area is flipped to obtain the updated property information of the target file; the interactive operation may be a closing operation on the preview area, for example, the preview control of the target file includes a close control, and in response to the triggering operation on the close control, the preview of the target file is canceled, the preview control is restored to its original size, and the updated property information of the target file is obtained.

[0194] For example, the interactive operation is to close the preview area. Figure 5C , Figure 5C Schematic diagram of updating attribute information by determining interactive location provided by an embodiment of the present application. Figure 5C In the left figure of , online file 401 is displayed. Online file 401 includes preview control 413 and preview control 414, wherein preview control 413 is used to display attribute information of target file A, and preview control 414 is used to display attribute information of target file B. Preview control 413 includes close control 415. In response to a trigger operation on close control 415, it is determined whether the interactive position of the trigger operation is in preview control 413 or preview control 414. When the interactive position of the trigger operation is in preview control 413, it is determined in which interactive element of preview control 413 the interactive position of the trigger operation is. If the interactive position of the trigger operation is in close control 415 of preview control 413, in Figure 5C In the right figure of , the size of the preview control 413 is restored to the original size, and the updated attribute information of the target file A is obtained.

[0195] In step 202, the update attribute information is converted into an update character string corresponding to the target file.

[0196] In some embodiments, a parser instance is created in a browser environment; update attribute information is parsed through the parser instance to obtain an update file object, wherein the update file object includes an update root element and multiple update sub-elements subordinate to the update root element; the update sub-elements in the update file object are traversed downward from the update root element, and a hypertext markup language code corresponding to the traversed update sub-element is generated according to the type of the traversed update sub-element; the hypertext markup language code corresponding to the update root element and the hypertext markup language code corresponding to the multiple update sub-elements are combined into an update string corresponding to the target file.

[0197] Following the example of step 103 above, if the image in the attribute information is modified, the sub-element in the file object will also be modified if Change to <title> , hereinafter referred to as h< / title> <title> At this time, the hypertext markup language code corresponding to the update root element is a, and the hypertext markup language codes corresponding to the six update child elements are b, h, d, e, f and g respectively. Then the update string corresponding to the target file is a+b+h+d+e+f+g.< / title>

[0198] In step 203, the update character string is converted into an updated virtual document object model, and refresh rendering is performed on the canvas based on the updated virtual document object model.

[0199] In some embodiments, an update string is traversed, and multiple update characters in the update string are read based on the order of traversal; multiple update nodes are generated based on the update tag names in the multiple update characters; and the multiple update nodes are combined into an update virtual document object model corresponding to the target file in the order of generation, wherein, when the number of target files is multiple, the update string of one target file corresponds to one update virtual document object model.

[0200] Continuing with the example of step 202 above, traverse the update string a+b+h+d+e+f+g, and read multiple update characters a, b, h, d, e, f and g in the update string based on the traversal order; if a, b, h, d and e are update tag names among the multiple update characters, then a, b, h, d and e are multiple update nodes; take the update node a as the update root node, and the update nodes b, h, d and e as the four update child nodes subordinate to the update root node a, so as to be combined into the updated virtual document object model abhde corresponding to the target file.

[0201] When updating the attribute information of the target file, the embodiment of the present application only needs to update the attribute information of the target file and re-refresh the rendering on the canvas corresponding to the target file, thereby ensuring that only the attribute information of the updated target file is rendered, improving the targetedness of the rendering, saving the occupancy of rendering resources, improving the rendering efficiency, and alleviating the rendering pressure.

[0202] In some embodiments, the preview area of ​​the target file is located in the preview control of the target file, see Figure 4J , Figure 4J is a tenth flow chart of the online file processing method provided by the embodiment of the present application. In the case where there are multiple target files, after step 106, execute Figure 4J Steps 301 to 303 are described in detail below.

[0203] In step 301, in response to a drag operation on a preview control of a first file, a first coordinate and a first size of the preview control of the dragged first file are acquired, wherein the first file is any one of a plurality of target files.

[0204] For example, the first coordinate of the preview control of the first file after dragging is (x1, y1), and the first size is (w1, h1).

[0205] In step 302, based on the first coordinates and the first size of the preview control of the first file and the second coordinates and the second size of the preview control of the second file, an overlapping area between the preview control of the first file and the preview control of the second file is determined, wherein the second file is any one target file among the multiple target files except the first file.

[0206] Following the example of step 301 above, the second coordinate of the preview control of the second file is (x2, y2), and the second size is (w2, h2). Then, the overlapping area between the preview control of the first file and the preview control of the second file can be calculated by the following formula 1:

[0207] s=min(w1,w2)*min(h1,h2)-max (x1,x2)max (y1,y2) (1)

[0208] Wherein, s represents the overlapping area between the preview control of the first file and the preview control of the second file, min() is used to obtain the minimum value, and max() is used to obtain the maximum value.

[0209] In some embodiments, before the first file is dragged, the preview control of the first file and the preview control of the second file may be completely non-overlapping, may be connected, or may already be partially overlapping.

[0210] In step 303, in response to the distance between the first coordinate and the second coordinate being less than the distance threshold and the overlapping area being greater than zero, the stacking state of the attribute information of the first file and the attribute information of the second file is rendered in the canvas corresponding to the first file and the canvas corresponding to the second file.

[0211] Following the examples of step 301 and step 302 above, the distance between the first coordinate and the second coordinate can be obtained by the following formula 2:

[0212]

[0213] Wherein, d represents the distance between the first coordinate and the second coordinate.

[0214] If the distance threshold is d1, and d<d1,s> 0, then in the canvas corresponding to the first file and the canvas corresponding to the second file, the stacking state of the attribute information of the first file and the attribute information of the second file is rendered, that is, the preview control of the first file and the preview control of the second file are stacked.

[0215] In an embodiment of the present application, when the distance between two files is less than a distance threshold and the overlapping area is greater than zero, the attribute information of the two files is rendered in a stacked state, so that when the preview areas of the two files at least partially overlap, the attribute information in one preview area is partially or completely covered by the attribute information in the other preview area, thereby reducing the occupied area of ​​the files.

[0216] In some embodiments, when there are multiple target files, if the overlap ratio of any two target files among the multiple target files is greater than or equal to the ratio threshold, the attribute information of the top target file among the multiple target files is rendered.

[0217] For example, see Figure 7 , Figure 7 is a schematic diagram of an embodiment of the present application in which the overlapping areas of two files are both greater than or equal to the area threshold. Figure 7 , the ratio threshold is 80%, and the sizes of file 1, file 2, and file 3 are the same. If the ratio of the overlapping area of ​​file 1 and file 2 to file 1 is 85%, then the overlapping ratio of file 1 and file 2 is 85%. If the ratio of the overlapping area of ​​file 2 and file 3 to file 2 is 85%, then the overlapping ratio of file 2 and file 3 is 85%. At this time, since file 2 and file 3 are basically covered and file 1 is at the top of multiple files, the attribute information of file 1 is rendered.

[0218] In the embodiment of the present application, when the overlapping ratios of multiple target files are greater than or equal to a ratio threshold, the top target file among the multiple target files is rendered, thereby reducing rendering pressure and improving rendering speed.

[0219] Below, an exemplary application of an embodiment of the present application in a file APP scenario will be described.

[0220] The embodiments of the present application are not limited to processing online files in a file APP scenario, but are also applicable in other scenarios, such as a file processing applet scenario in an instant messaging APP.

[0221] Taking the processing of online files in the file APP scenario as an example, when the user needs to upload the target file in the online file interface, the relevant technology displays the attribute information of the target file through the mutual conversion of the real document object model and the canvas. During the upload or download process, the attribute information will continue to change. In order to reflect this change, it is necessary to continuously generate new real document object models to render the entire online file interface on the canvas, which will greatly consume resources and result in low rendering efficiency.

[0222] Through the online file processing method provided in the embodiment of the present application, the attribute information of the target file obtained by the online file interface is converted into a virtual document object model, and the attribute information of the target file is rendered on the canvas corresponding to the target file based on the virtual document object model. The rendering can be directly performed on the canvas through the virtual document object model, and the virtual document object model is only used for rendering on the canvas of the target file. Compared with the method of re-rendering the entire page of the online file interface in the related art, the rendering process is more targeted, the rendering pressure of the online file is reduced, the rendering resources are saved, and the rendering efficiency of the online file is improved.

[0223] With the popularization of online office, users are increasingly accustomed to storing files and data in the cloud. Users need a platform that can centrally manage various types of documents and related attachments for easy storage, retrieval and sharing. The online file processing method provided in the embodiment of the present application supports the uploading of attachments (i.e., target files) and allows external data and information to be integrated into the online file platform. Users can easily share and collaborate on related files and access their files anytime and anywhere, further improving the document ecosystem, connecting local files with online files, increasing user stickiness, and enhancing the convenience of information transmission between users.

[0224] See also Figure 8 , Figure 8 Schematic diagram of inserting a local file provided by an embodiment of the present application. User A can choose to insert a local file (i.e., target file) from the menu of the online file or the text function list. Figure 8 In the left figure of FIG. 8 , from the menu 802 of the online file 801 (i.e., the online file interface), in response to the triggering operation for the local file upload button 803 (i.e., the file upload control), in Figure 8 In the figure on the right, a local file interface 804 (i.e., a file selection interface) is displayed. The local file interface 804 includes multiple local files, such as local file 805 and local file 806. Local files support single or batch upload of attachments. When uploading in batches, a file upload threshold (i.e., quantity threshold) can be set, such as 9.

[0225] When users upload attachments of different formats, different upload statuses are displayed. Fig. 9 , Fig. 9 Schematic diagram of different attachment upload states provided in the embodiment of the present application. Fig. 9 In the left figure of , when uploading a picture or video type file, the default is the card preview state of the Canvas component directly generated by the virtual document object model. Fig. 9 In the figure on the right, when uploading an audio file, the default state is a small card state of the Canvas component directly generated by the virtual DOM.

[0226] See also Fig.10 , Fig.10 Schematic diagram of different attachments corresponding to different canvases provided in the embodiment of the present application. Fig.10 In the , different attachments occupy positions and are displayed through Canvas component states of different widths and heights, and different icons are rendered according to different file types.

[0227] See also Fig.11 , Fig.11 Schematic diagram of file stacking provided by the embodiment of the present application. Fig.11 In the , the Canvas component card states corresponding to different files support stacking (i.e. stacking state) and can be adjusted by dragging (i.e. dragging operation).

[0228] When previewing files, the Canvas is directly generated based on the virtual DOM. The click event processing method of adding the real DOM directly to the attachment is no longer used. All interactions become manual management of the Canvas. Users detect mouse events and then calculate whether the click position is on the Canvas attachment. The download functions such as closing, zooming in and switching attachments can all operate normally.

[0229] See also Fig.12 , Fig.12 Schematic diagram of interaction with a displayed target file provided by an embodiment of the present application. Fig.12 In the example, after the attribute information 807 of the target file is displayed, human-computer interaction can be implemented through the virtual document object model. For example, the user can be supported to enter the online file for editing after scanning the attribute information 807 of the target file.

[0230] When uploading an attachment to an online file, the browser first obtains the size of the attachment, and checks with the backend server (which may be the above-mentioned server 200) whether the account has capacity before uploading. In response to the trigger operation of the file upload control on the computer side (which may be the above-mentioned terminal 400-1 or terminal 400-2), it supports selecting local files, and in response to the trigger operation of the file upload control on the mobile side (which may be the above-mentioned terminal 400-1 or terminal 400-2), it supports taking pictures, selecting pictures, and selecting local files.

[0231] When a file is uploaded, it will be determined whether it is an empty file, whether it meets the format requirements, and whether the file content is too large. The backend server will perform file verification to prevent potential malicious files from being uploaded. If the format of some files does not meet the format requirements when uploading files in batches, a prompt message will be displayed, such as "This file format does not support upload, please reselect", and the upload of files in this format will be prohibited, while other files that meet the format requirements will continue to be uploaded.

[0232] See also Fig.13 , Fig.13 Schematic diagram of uploading files in a queue manner provided by an embodiment of the present application. Fig.13 In the process of creating a queue, when the user has not selected any file, the queue is empty; when there are multiple files to upload, for example, 5 files, namely file 1, file 2, file 3, file 4 and file 5, the hash value (Message Digest Algorithm 5, MD5) of the file is calculated to determine whether the uploaded file is repeated, and as the identification of multiple uploaded files in the queue, the 5 files will be arranged in the queue in the order of file size; when the files in the queue start to be uploaded, the file 1 at the front of the queue is uploaded first, and the file 1 is marked as deleted in the queue, and then the file 2 is uploaded; when the file 2 has been uploaded, the file 2 is marked as deleted in the queue, and then the file 3 is uploaded, and so on; when all the 5 files are uploaded, the 5 files in the queue are marked as deleted, and then the 5 files marked as deleted are cleared, so that the entire queue is empty, and the 5 files are uploaded successfully.

[0233] See also Fig.14 , Fig.14 Schematic diagram of file segmentation provided by the embodiment of the present application. Fig.14 In the process, for files whose size is larger than the threshold, the large file is split into small pieces (i.e., sub-files), and each small piece is uploaded. At the same time, the upload progress of each small piece is recorded. If the upload process is interrupted, the unfinished small piece can be re-uploaded. When the attachment is completely uploaded to the cloud, the cloud will automatically convert the uploaded files to different formats and resolutions.

[0234] The threshold can be set to 1MB, and a 1MB file block is uploaded each time. If the upload fails, a retry will be performed. The background server will upload the file in blocks and reassemble the multiple file blocks into a complete file after receiving all the file blocks. In order to handle the upload failure, the status of the uploaded file blocks is saved and the upload is continued from where the upload was interrupted.

[0235] For video-type files, when the file is too large, if you need to view the video and prevent it from being unable to view due to its large size, you can perform the following operations: first compress the video, then upload it, or cache it while uploading.

[0236] See Fig.15 , Fig.15 is a schematic diagram of the principle of file rendering provided by an embodiment of the present application. First, obtain the string of HyperText Markup Language (HTML) corresponding to the file (i.e., the string corresponding to the target file). The HTML string is a multi-segment continuous and regular plain text. See Fig.16 , Fig.16 is a schematic diagram of the structure of the string of HyperText Markup Language provided by an embodiment of the present application. In Fig.16 , the HTML string describes the basic information required to display the attachment, such as type, icon, title, size, and button.

[0237] Canvas cannot directly recognize the HTML string and needs to convert it into a virtual DOM. See Fig.17 , Fig.17 is a schematic diagram of converting a string into a virtual document object model provided by an embodiment of the present application. First, traverse the HTML string. For example, the HTML string can be: <div class＝"card"> <img src＝"图标"> <div class＝"file-info"> title <p href＝""> File size <button> Button< / button> , read each character of the HTML string from left to right. When encountering the first "<" character and the first ">" character, and when encountering the last "< / " character and the last ">" character (i.e., the termination characters), verify whether the front and back tag names between the characters match. If they match, it means the first round of tag parsing ends, and the character div (i.e., the first tag name) is added to the root node of the virtual DOM; then parse the text content, recursively apply the above logic, and the character img is added to the sub-node list of the root node character div, indicating the end of the second round of tag parsing; similarly, the title character p, the file size character p, and the button character button will all be added to the sub-node list of the root node character div.

[0238] See Fig.18 , Fig.18 is a schematic diagram of the structure of the virtual document object model provided by an embodiment of the present application. After the HTML string is processed, a virtual DOM object will be output. The virtual DOM object is a tree-like structure. Among them, the card state serves as the root node, the icon, file information, and button serve as the direct sub-nodes (i.e., the first sub-nodes) subordinate to the root node, and the title and file size serve as the sub-nodes (i.e., the second sub-nodes) directly subordinate to the sub-node file information and indirectly subordinate to the root node. The virtual DOM object is essentially a JavaScript object, representing the structure of the original HTML string.

[0239] See Fig.19, Fig.19 is a schematic diagram of a rendering attachment provided in an embodiment of the present application. Fig.19 In the upper bitmap, the virtual DOM is handed over to the Canvas engine. Canvas will draw the layers and render them into the canvas in the order from the root node to the child node according to the tree structure. First, it starts with the root node, then traverses each child node of the virtual DOM, draws the icon node, file information node (title node and file size node), button node and other element nodes according to the node type, and handles the corresponding page layout. Fig.19 In the figure below, the user will see the rendered attachment on the page (i.e., the online file interface).

[0240] See also Fig. 20 , Fig. 20 This is a schematic diagram of the real document object model combined with rendering provided by the embodiment of the present application. For simple attachment operations, such as rendering placeholders, text rendering, dragging and stacking, the Canvas component will provide better performance because the Canvas component does not require the real DOM's rearrangement and redrawing mechanism. However, real DOM component operations may cause performance problems when there are many elements, because the browser needs to continuously update the rendering tree. If many attachments are uploaded and all are presented using real DOM components, the page performance will be very poor.

[0241] See also Fig.21 , Fig.21 This is a schematic diagram of the virtual document object model combined with rendering provided by the embodiment of the present application. All attachments are displayed based on the virtual DOM and Canvas, and the real DOM is no longer needed on the page, and the virtual DOM directly reaches the Canvas layer.

[0242] In the related art, there are two display states of attachments: one is the real DOM component and the other is the Canvas component. The attachment will show different states at different times, and the states between the real DOM component and the Canvas component will be converted according to the user's operation. The state of the attachment in the online file processing method provided in the embodiment of the present application is one and only one, which is the Canvas component.

[0243] In the related art, Javascript is used in the calculation logic of the attachment, but Javascript has poor performance when doing a large number of calculations. The online file processing method provided in the embodiment of the present application entrusts the calculation logic to the web programming language (WebAssembly) in binary format. When uploading an attachment, the attachment is a Canvas component; when the attachment is uploaded, the attachment is also a Canvas component; when the user operates the attachment, WebAssembly is used to calculate the user's click size and coordinates; when the user completes the operation of the attachment, the Canvas component dynamically updates the status through the WebAssembly calculation results and the virtual DOM.

[0244] Canvas is responsible for intercepting the user's behavior of viewing the attachment content and handing it over to WebAssembly for calculation and processing, such as clicking, dragging, switching, downloading, closing and zooming in on the attachment content. It is also responsible for rendering placeholders, text rendering, dragging and stacking, etc.

[0245] Since the formats of uploaded local files are different and the display methods of files of different formats are different, the online files will calculate the size of the virtual DOM of different files through WebAssembly in the local browser, and create one or more Canvas to occupy the position. For example, when uploading a local video, a Canvas will be created to occupy the position and the first frame of the video attachment will be obtained for display as the uploaded preview. In addition to the first frame, video files can also set key frames as preview images. If you have watched a part of the video last time, you can use the last frame of the last watched part as the preview image; document files can capture part of the file content, such as the file title as the preview image; audio files can set preset images as preview images.

[0246] See also Fig. 22 , Fig. 22 This is a schematic diagram of calculating the click range provided by an embodiment of the present application. When a user clicks on the attachment content, WebAssembly will calculate the click range, such as determining whether the attachment view button or delete button is clicked, and then triggering Canvas to render the content.

[0247] In the event processing mechanism, the rectangular boundary information of the Canvas is obtained, and then the coordinates of the click position relative to the Canvas are calculated. The size and coordinates and other calculation data are handed over to WebAssembly for calculation, and the click event is processed on the Canvas. By increasing the size of the click area and calculating whether the click position is within the expanded rectangle, the user's attachment operation experience is improved.

[0248] The logic of calculating the click range through WebAssembly is as follows: define a mathematical function isPointInRectangleWithFingerSize to detect the logic of finger clicking on the Canvas area. Get the coordinates of the point (x, y), the properties of the original rectangle rect, and the size of the finger fingerSize. The function isPointInRectangleWithFingerSize returns a Boolean value indicating whether the point is within the rectangle (taking into account the size of the finger).

[0249] First, expand the rectangle according to the finger size and calculate the properties of the expanded rectangle expandedRect: the x coordinate of the expanded rectangle expandedRect.x = rect.x-fingerSize / 2, where rect.x represents the x coordinate of the original rectangle; the y coordinate of the expanded rectangle expandedRect.y = rect.y-fingerSize / 2, where rect.y represents the y coordinate of the original rectangle; the width of the expanded rectangle expandedRect.width = rect.width + fingerSize, where rect.width represents the width of the original rectangle; the height of the expanded rectangle expandedRect.height = rect.height + fingerSize, where rect.height represents the height of the original rectangle.

[0250] Then, check whether the point (x, y) is within the expanded rectangle expandedRect. If the following conditions are met, the point (x, y) is within the expanded rectangle expandedRect: the x coordinate is within the x coordinate range of the expanded rectangle, that is, x>=expandedRect.x and x<=expandedRect.x+expandedRect.width; the y coordinate is within the y coordinate range of the expanded rectangle, that is, y>=expandedRect.y and y<=expandedRect.y+expandedRect.height.

[0251] If the point (x, y) meets the above conditions, the function returns true, indicating that the point (x, y) is within the expanded rectangle expandedRect (taking into account the size of the finger). Otherwise, it returns false.

[0252] The logic of the function is shown in Formula 3 below:

[0253]

[0254] Among them, ∧ represents the logical AND operation.

[0255] See also Fig.23 , Fig.23 This is a schematic diagram of the attachment stacking provided by the embodiment of the present application. When the user drags the attachment content, WebAssembly will calculate the distance between attachment A and attachment B. The stacking calculation logic of WebAssembly dragging can refer to the examples of steps 301 to 303 above, which will not be repeated here.

[0256] The embodiment of the present application converts the attribute information of the target file obtained by the online file interface into a virtual document object model, and renders the attribute information of the target file on the canvas corresponding to the preview area of ​​the target file based on the virtual document object model. Compared with the method of refreshing and rendering the entire page of the online file interface every time the attribute information of a target file is rendered, since only the canvas of the preview area needs to be rendered in a targeted manner, the rendering pressure of the online file is significantly reduced, rendering resources are saved, and the rendering efficiency of the online file is improved. By setting the quantity threshold and the flow threshold, when the file is uploaded or downloaded, the resource occupancy is guaranteed to be within the preset range, avoiding the instantaneous surge in traffic due to the excessive or large number of target files, and reducing the rendering pressure. According to the number or type of target files, a parser instance corresponding to the target file or the type of target file is created to construct a virtual document object model, so that different target files or target files of different types can be processed in parallel in different parser instances, thereby improving the processing efficiency of the file. When updating the attribute information of the target file, only the updated attribute information of the target file needs to be updated and the rendering is refreshed on the canvas corresponding to the target file, which ensures that only the attribute information of the updated target file is rendered, improves the pertinence of the rendering, saves the occupation of rendering resources, improves the rendering efficiency, and relieves the rendering pressure. When the distance between two files is less than the distance threshold and the overlapping area is greater than zero, the stacking state of the attribute information of the two files is rendered, so that the files that meet the stacking conditions are stacked, reducing the occupied area of ​​the files.

[0257] The following is a description of an exemplary structure of the online file processing device 455 provided in the embodiment of the present application implemented as a software module. In some embodiments, Figure 3 As shown, the software modules stored in the online file processing device 455 of the memory 450 may include:

[0258] The interface display module 4551 is used to display the online file interface.

[0259] The information acquisition module 4552 is used to obtain attribute information of the target file in response to receiving a file operation instruction in the online file interface.

[0260] Information conversion module 4553, used to convert attribute information into a character string corresponding to the target file;

[0261] A data construction module 4554 is used to construct a virtual document object model based on the character string;

[0262] A canvas creation module 4555 is used to create a canvas corresponding to a target file in a preview area in an online file interface;

[0263] The information rendering module 4556 is used to render the attribute information of the target file on the canvas based on the virtual document object model.

[0264] In some embodiments, the online file interface includes a file upload control and a file download control, the file operation instructions include a file upload instruction and a file download instruction, and the information acquisition module 4552 is further used to obtain the attribute information of at least one first target file to be uploaded in response to the file upload instruction for the file upload control; and to obtain the attribute information of at least one second target file to be downloaded in response to the file download instruction for the file download control.

[0265] In some embodiments, the information conversion module 4553 is also used to create a parser instance in a browser environment, wherein the online file interface runs in the browser environment; parse the attribute information through the parser instance to obtain a file object; and generate a string corresponding to the target file based on the file object, wherein, when the number of target files is multiple, one target file corresponds to one string.

[0266] In some embodiments, the file object includes a root element and multiple child elements subordinate to the root element. The information conversion module 4553 is also used to traverse the child elements in the file object downward from the root element, and generate a hypertext markup language code corresponding to the traversed child element according to the type of the traversed child element; the hypertext markup language code corresponding to the root element and the hypertext markup language code corresponding to the multiple child elements are combined into a character string corresponding to the target file.

[0267] In some embodiments, the string includes multiple characters, and the multiple characters include a tag name. The data construction module 4554 is also used to traverse the string, read the multiple characters in the string based on the traversal order; generate multiple nodes based on the tag names in the multiple characters; and combine the multiple nodes into a virtual document object model corresponding to the target file in the order of generation, wherein, when the number of target files is multiple, a string of a target file corresponds to a virtual document object model.

[0268] In some embodiments, the multiple characters also include a termination character, the multiple nodes include a root node and multiple child nodes subordinate to the root node, and the data construction module 4554 is also used to use the first tag name in the string as the root node; use the tag name between the first tag name and the termination character corresponding to the first tag name as the first child node subordinate to the root node; use the tag name between the second tag name and the termination symbol corresponding to the second tag name as the second child node directly subordinate to the child node corresponding to the second tag name, wherein the second tag name is any tag name among the tag names corresponding to the multiple characters that is different from the first tag name; and combine the root node, the first child node, and the second child node according to the subordinate relationship into a virtual document object model corresponding to the target file.

[0269] In some embodiments, the online file interface runs in a browser environment, and the browser environment includes multiple parser instances. The data construction module 4554 is also used to create multiple parser instances in the browser environment according to the type of the target file or the number of target files if there are multiple target files, and call multiple parser instances to build a virtual document object model based on a string, wherein one parser instance corresponds to one target file or one type of target file.

[0270] In some embodiments, the data construction module 4554 is also used to create, for each target file, a parser instance corresponding to each target file in the browser environment; or to create, for each type of target file, a parser instance corresponding to each type in the browser environment.

[0271] In some embodiments, the canvas creation module 4555 is also used to determine the size of the preview control of the target file, wherein the preview area of ​​the target file is located in the preview control of the target file. When the number of target files is multiple, one target file corresponds to one preview control; based on the size, a canvas corresponding to the target file is created in the preview area of ​​the online file interface, wherein the preview area is the area in the online file interface used to load the preview control.

[0272] In some embodiments, the canvas creation module 4555 is also used to, if the type of the target file is a document, obtain part of the content of the document, and reduce the size of the part of the content proportionally to obtain the size of the preview control of the target file; if the type of the target file is a video, obtain the size of the image frame in the video, reduce the size of the image frame proportionally to obtain the size of the preview control of the target file; if the type of the target file is audio, use a preset size as the size of the preview control of the target file; if the type of the target file is a picture, reduce the size of the picture proportionally to obtain the size of the preview control of the target file.

[0273] In some embodiments, the virtual document object model includes multiple nodes, the multiple nodes include a root node and multiple child nodes subordinate to the root node, the string includes multiple characters, one node corresponds to one character, and the information rendering module 4556 is also used to traverse the child nodes in the virtual document object model from the root node downward, query the target characters corresponding to the traversed child nodes, and render the attribute information corresponding to the target characters onto the canvas, wherein, when the number of target files is multiple, one virtual document object model renders the attribute information of one target file.

[0274] In some embodiments, the information rendering module 4556 is also used to respond to interactive operations on the attribute information of the target file, determine the updated attribute information of the target file according to the interactive operations; convert the updated attribute information into an updated string corresponding to the target file; convert the updated string into an updated virtual document object model, and refresh rendering on the canvas based on the updated virtual document object model.

[0275] In some embodiments, the preview area of ​​the target file is located in the preview control of the target file, and the information rendering module 4556 is further used to obtain the first coordinates and first size of the preview control of the first file after dragging in response to a drag operation on the preview control of the first file, wherein the first file is any one of the multiple target files; based on the first coordinates and first size of the preview control of the first file and the second coordinates and second size of the preview control of the second file, determine the overlapping area between the preview control of the first file and the preview control of the second file, wherein the second file is any one of the multiple target files except the first file; in response to the distance between the first coordinate and the second coordinate being less than a distance threshold and the overlapping area being greater than zero, render the stacking state of the attribute information of the first file and the attribute information of the second file in the canvas corresponding to the first file and the canvas corresponding to the second file.

[0276] The embodiment of the present application provides a computer program product, which includes a computer program or a computer executable instruction, and the computer program or the computer executable instruction is stored in a computer-readable storage medium. The processor of the electronic device reads the computer executable instruction from the computer-readable storage medium, and the processor executes the computer executable instruction, so that the electronic device executes the online file processing method described in the embodiment of the present application.

[0277] The present application embodiment provides a computer-readable storage medium storing computer-executable instructions, wherein the computer-executable instructions or computer programs are stored. When the computer-executable instructions or computer programs are executed by a processor, the processor will execute the online file processing method provided by the present application embodiment, for example, Figure 4A The online file processing method is shown.

[0278] In some embodiments, the computer-readable storage medium may be a memory such as RAM, ROM, flash memory, magnetic surface memory, optical disk, or CD-ROM; or may be various devices including one or any combination of the above memories.

[0279] In some embodiments, computer executable instructions may be in the form of a program, software, software module, script or code, written in any form of programming language (including compiled or interpreted languages, or declarative or procedural languages), and may be deployed in any form, including as a stand-alone program or as a module, component, subroutine or other unit suitable for use in a computing environment.

[0280] As an example, computer-executable instructions may, but need not, correspond to a file in a file system, may be stored as part of a file storing other programs or data, such as in one or more scripts in a hypertext markup language document, in a single file dedicated to the program in question, or in multiple coordinated files (e.g., files storing one or more modules, subroutines, or code portions).

[0281] As an example, computer executable instructions may be deployed to be executed on one electronic device, or on multiple electronic devices located at one site, or on multiple electronic devices distributed at multiple sites and interconnected by a communication network.

[0282] In summary, the attribute information of the target file obtained by the online file interface is converted into a virtual document object model through the embodiment of the present application, and the attribute information of the target file is rendered on the canvas corresponding to the preview area of ​​the target file based on the virtual document object model. Compared with the method of refreshing and rendering the entire page of the online file interface each time the attribute information of a target file is rendered, since only the canvas of the preview area needs to be rendered in a targeted manner, the rendering pressure of the online file is significantly reduced, rendering resources are saved, and the rendering efficiency of the online file is improved. By setting the quantity threshold and the flow threshold, when the file is uploaded or downloaded, the resource occupancy is guaranteed to be within the preset range, avoiding the instantaneous surge in traffic due to the excessive or large number of target files, and reducing the rendering pressure. According to the number or type of target files, a parser instance corresponding to the target file or the type of the target file is created to construct a virtual document object model, so that different target files or different types of target files can be processed in parallel in different parser instances, thereby improving the processing efficiency of the file. When updating the attribute information of the target file, only the updated attribute information of the target file needs to be updated and the rendering is refreshed on the canvas corresponding to the target file, which ensures that only the attribute information of the updated target file is rendered, improves the pertinence of the rendering, saves the occupation of rendering resources, improves the rendering efficiency, and relieves the rendering pressure. When the distance between two files is less than the distance threshold and the overlapping area is greater than zero, the stacking state of the attribute information of the two files is rendered, so that the files that meet the stacking conditions are stacked, reducing the occupied area of ​​the files.

[0283] The above is only an embodiment of the present application and is not intended to limit the protection scope of the present application. Any modifications, equivalent substitutions and improvements made within the spirit and scope of the present application are included in the protection scope of the present application.

Claims

1. A method for processing online files, characterized in that: The method comprises: Display the online file interface; In response to receiving a file operation instruction in the online file interface, acquiring attribute information of a target file; Convert the attribute information into a character string corresponding to the target file; Building a virtual document object model based on the character string; In the preview area of ​​the online file interface, creating a canvas corresponding to the target file; The attribute information of the target file is rendered on the canvas based on the virtual document object model.

2. The method according to claim 1, characterized in that The step of creating a canvas corresponding to the target file in the preview area of ​​the online file interface includes: Determining a size of a preview control of the target file, wherein a preview area of ​​the target file is located in the preview control of the target file, and when there are multiple target files, one target file corresponds to one preview control; A canvas corresponding to the target file is created in a preview area of ​​the online file interface based on the size, wherein the preview area is an area in the online file interface used to load the preview control.

3. The method according to claim 2, characterized in that The determining the size of the preview control of the target file includes: If the type of the target file is a document, obtaining a portion of the content of the document, and reducing the size of the portion of the content in equal proportion to obtain the size of the preview control of the target file; If the type of the target file is a video, the size of the image frame in the video is obtained, and the size of the image frame is proportionally reduced to obtain the size of the preview control of the target file; If the type of the target file is audio, the preset size is used as the size of the preview control of the target file; If the type of the target file is a picture, the size of the picture is reduced proportionally to obtain the size of the preview control of the target file.

4. The method according to claim 1, characterized in that The character string includes a plurality of characters, and the plurality of characters includes a tag name; The step of constructing a virtual document object model based on the character string includes: Traversing the string, and reading the plurality of characters in the string based on the order of the traversal; generating a plurality of nodes based on the label name in the plurality of characters; The multiple nodes are combined into a virtual document object model corresponding to the target file in the order of generation, wherein when there are multiple target files, a character string of one target file corresponds to one virtual document object model.

5. The method according to claim 4, characterized in that The plurality of characters further include a termination character, and the plurality of nodes include a root node and a plurality of child nodes subordinate to the root node; The combining the multiple nodes into a virtual document object model corresponding to the target file in the generated order includes: Taking the first tag name in the string as the root node; Taking the first tag name and the tag name between the termination characters corresponding to the first tag name as the first child node subordinate to the root node; The tag name between the second tag name and the termination symbol corresponding to the second tag name is used as a second child node directly subordinate to the child node corresponding to the second tag name, wherein the second tag name is any one of the tag names corresponding to the multiple characters that is different from the first tag name; The root node, the first child node and the second child node are combined into a virtual document object model corresponding to the target file according to a subordinate relationship.

6. The method according to claim 1, characterized in that The online file interface runs in a browser environment, and the browser environment includes multiple parser instances; The step of constructing a virtual document object model based on the character string includes: If there are multiple target files, then creating multiple parser instances in the browser environment according to the types of the target files or the number of the target files, and The multiple parser instances are called to construct a virtual document object model based on the character string, wherein one of the parser instances corresponds to one of the target files or one of the target files of the type.

7. The method according to claim 6, characterized in that The step of creating the multiple parser instances in the browser environment according to the type of the target file or the number of the target files comprises: For each of the target files, create the parser instance corresponding to each of the target files in the browser environment; or For each target file of the type, create the parser instance corresponding to each type in the browser environment.

8. The method according to any one of claims 1 to 7, characterized in that: The virtual document object model includes a plurality of nodes, the plurality of nodes include a root node and a plurality of child nodes subordinate to the root node, the string includes a plurality of characters, and one of the nodes corresponds to one of the characters; The rendering on the canvas to form the attribute information of the target file based on the virtual document object model includes: Starting from the root node, the child nodes in the virtual document object model are traversed downward, the target characters corresponding to the traversed child nodes are queried, and the attribute information corresponding to the target characters is rendered onto the canvas, wherein, when there are multiple target files, one virtual document object model is used to render the attribute information of one target file.

9. The method according to any one of claims 1 to 7, characterized in that: After rendering the attribute information of the target file on the canvas based on the virtual document object model, the method further includes: In response to an interactive operation on the attribute information of the target file, determining updated attribute information of the target file according to the interactive operation; Converting the update attribute information into an update character string corresponding to the target file; The update character string is converted into an updated virtual document object model, and refresh rendering is performed on the canvas based on the updated virtual document object model.

10. The method according to any one of claims 1 to 7, characterized in that: The preview area of ​​the target file is located in the preview control of the target file; In the case that there are multiple target files, after rendering the attribute information of the target files on the canvas based on the virtual document object model, the method further includes: In response to a drag operation on a preview control of a first file, acquiring a first coordinate and a first size of the preview control of the first file after dragging, wherein the first file is any one of the plurality of target files; Determining an overlapping area between the preview control of the first file and the preview control of the second file based on the first coordinates and the first size of the preview control of the first file and the second coordinates and the second size of the preview control of the second file, wherein the second file is any one of the plurality of target files except the first file; In response to the distance between the first coordinate and the second coordinate being less than a distance threshold and the overlapping area being greater than zero, in the canvas corresponding to the first file and the canvas corresponding to the second file, the stacking state of the attribute information of the first file and the attribute information of the second file is rendered.

11. The method according to any one of claims 1 to 7, characterized in that: The converting the attribute information into a character string corresponding to the target file includes: Creating a parser instance in a browser environment, wherein the online file interface runs in the browser environment; Parsing the attribute information by the parser instance to obtain a file object; A character string corresponding to the target file is generated based on the file object, wherein when there are multiple target files, one target file corresponds to one character string.

12. The method according to claim 11, characterized in that The file object includes a root element and a plurality of sub-elements subordinate to the root element; The generating a character string corresponding to the target file based on the file object includes: Traversing the sub-elements in the file object downward from the root element, and generating a hypertext markup language code corresponding to the traversed sub-elements according to the types of the traversed sub-elements; The hypertext markup language code corresponding to the root element and the hypertext markup language codes corresponding to the plurality of sub-elements are combined into a character string corresponding to the target file.

13. The method according to any one of claims 1 to 7, characterized in that: The online file interface includes a file upload control and a file download control, and the file operation instructions include a file upload instruction and a file download instruction; The step of obtaining attribute information of a target file in response to receiving a file operation instruction in the online file interface includes: In response to the file upload instruction for the file upload control, acquiring attribute information of at least one first target file to be uploaded; In response to the file download instruction for the file download control, attribute information of at least one second target file to be downloaded is obtained.

14. An online file processing device, characterized in that: The device comprises: An interface display module, used to display the online file interface; An information acquisition module, configured to acquire attribute information of a target file in response to receiving a file operation instruction in the online file interface; An information conversion module, used for converting the attribute information into a character string corresponding to the target file; A data construction module, used for constructing a virtual document object model based on the character string; A canvas creation module, used to create a canvas corresponding to the target file in the preview area of ​​the online file interface; An information rendering module is used to render attribute information of the target file on the canvas based on the virtual document object model.

15. An electronic device, characterized in that: The electronic device comprises: A memory for storing computer executable instructions; The processor is used to implement the online file processing method described in any one of claims 1 to 13 when executing the computer executable instructions stored in the memory.

16. A computer-readable storage medium storing computer-executable instructions or a computer program, characterized in that: When the computer executable instructions or computer program are executed by a processor, the online file processing method according to any one of claims 1 to 13 is implemented.

17. A computer program product comprising computer executable instructions or a computer program, characterized in that When the computer executable instructions or computer program are executed by a processor, the online file processing method according to any one of claims 1 to 13 is implemented.

Images