An end-to-end h5 reading file method and system

Abstract

The application relates to an end-in H5 file reading method and system, which comprises the following steps: an HTML5 trigger defines a file selector opening request command and sends the command to a native original through a JSBridge bridge; the native original analyzes the file selector opening request command to obtain an analysis result; a file selector is defined according to the analysis result; after the file selector is defined, a file selection operation is performed to obtain a file path address; the file path address is sent to the HTML5 through the JSBridge bridge; the HTML5 receives the file path address and triggers a file operation request command; the native original receives the file operation request command; it is judged whether a file reading keyword exists in the file operation request command; if the file reading keyword exists, the file operation request command is a file reading command; and a file reading operation of the file operation request command is performed. The end-in H5 file reading method and system can realize H5 file reading on both Android and iOS ends and simplify file reading logic.

Description

Technical Field

[0001] This invention relates to the field of client-side development technology, and in particular to a method and system for reading files using H5 within a client. Background Technology

[0002] Currently, there are two main approaches to reading files from a mobile device using H5: 1. Using a jsBridge bridge to send and receive strings between H5 and native code. 2. Using a file-type input component in H5 to request the system to open a file selector to obtain the file path. However, each approach has its own problems: Approach 1 (using jsBridge): This approach involves data interaction on the UI thread, which has limitations on data size; for large files, it will block the UI thread. During this time, the user cannot perform any operations, impacting the user experience. Approach 2 (input component): On iOS, this approach is provided by the system, and the UI and business logic cannot be modified; on Android, the system does not implement this functionality, but the UI and business logic can be customized. After the user selects a file, the file address is returned to the H5, which then uses a FileReader object to read the file content (base64 processing, increasing the file size by 30%). Summary of the Invention

[0003] To address the shortcomings of existing technologies, this invention proposes an in-device H5 file reading method and system, providing a solution that does not limit file size and is applicable to both Android and iOS, the two current mainstream mobile operating systems.

[0004] To achieve the above objectives, the technical solution adopted by the present invention includes:

[0005] A method for reading files via H5 within a client, characterized by comprising:

[0006] S1. HTML5 triggers a definition file selector enable request command; the definition file selector enable request command is sent to the native source via the JSBridge bridge;

[0007] S2. Native captures the defined file selector enable request command, parses the defined file selector enable request command to obtain the parsing result; defines the file selector according to the parsing result, performs the file selection operation after the file selector is defined, and obtains the file path address; sends the file path address to HTML5 through the JSBridge bridge;

[0008] S3 and HTML5 receive the file path address and trigger a file operation request command, including: creating an XMLHttpRequest object; reading the file path address using the keyword nativeFileReader; and sending the file operation request command to the native object via JSBridge.

[0009] S4. The Native component receives the file operation request command and determines whether the file operation request command contains a file read keyword.

[0010] If the file operation request command contains the keyword "file read", then the file operation request command is a file read command; execute the file read operation of the file operation request command.

[0011] If the file operation request command does not contain the file read keyword, then the file operation request command is an HTTP request command and will not be executed.

[0012] Furthermore, the file reading keyword is: nativeFileReader.

[0013] Furthermore, before step S1, the method includes step Sa: deploying and debugging the JSBridge bridge environment in HTML5 and Native.

[0014] Furthermore, the file reading operation of executing the file operation request command includes: obtaining the file name based on the Name keyword of the file operation request command, reading the local file based on the file name, obtaining the target file, and encapsulating the target file into a standard response message and returning it.

[0015] Furthermore, it also includes step S5: reading the returned standard response message, parsing the returned standard response message, obtaining the message parsing result, wherein the message parsing result includes at least: file type, and reading the file content according to the message parsing result.

[0016] This invention also relates to an in-client H5 file system, characterized in that it includes:

[0017] A file selector enable request command triggering module is defined, which is used by HTML5 to trigger the file selector enable request command; the file selector enable request command is sent to the native code via the JSBridge bridge;

[0018] The file selector definition module is used to natively capture the file selector enable request command, parse the file selector enable request command to obtain the parsing result, define the file selector according to the parsing result, perform a file selection operation after the file selector is defined, obtain the file path address, and send the file path address to HTML5 through the JSBridge bridge.

[0019] The file operation request command triggering module is used to receive the file path address in HTML5 and trigger a file operation request command, including: creating an XMLHttpRequest object; reading the file path address through the keyword nativeFileReader; and sending the file operation request command to the native object through JSBridge.

[0020] The file read keyword determination module is used to natively receive the file operation request command and determine whether the file operation request command contains a file read keyword.

[0021] If the file operation request command contains the keyword "file read", then the file operation request command is a file read command; execute the file read operation of the file operation request command.

[0022] If the file operation request command does not contain the file read keyword, then the file operation request command is an HTTP request command and will not be executed.

[0023] Furthermore, it also includes:

[0024] The JSBridge bridge environment deployment and debugging module is used to deploy and debug the JSBridge bridge environment in HTML5 and Native.

[0025] The standard response message reading module is used to read the returned standard response message, parse the returned standard response message, and obtain the message parsing result. The message parsing result includes at least: file type, and the file content is read according to the message parsing result.

[0026] The present invention also relates to a computer-readable storage medium, characterized in that the storage medium stores a computer program, which, when executed by a processor, implements the above-described intra-terminal H5 file reading method.

[0027] The present invention also relates to an electronic device, characterized in that it includes a processor and a memory;

[0028] The memory is used to store the file selector open request command and the file operation request command.

[0029] The processor is used to execute the above-mentioned in-client H5 file reading method by calling the defined file selector to initiate the request command and the file operation request command.

[0030] The present invention also relates to a computer program product, including a computer program and / or instructions, characterized in that, when the computer program and / or instructions are executed by a processor, they implement the steps of the above-described in-terminal H5 file reading method.

[0031] The beneficial effects of this invention are as follows:

[0032] The present invention employs an in-app H5 file reading method and system, simulating H5 resource requests. The logic of H5 reading native files is treated as a single HTTP request. The native system checks all H5 requests; if a file reading request is detected, the local file is read; otherwise, the request is allowed and handled by the browser kernel. This in-app H5 file reading method and system can implement H5 file reading on both Android and iOS. H5 can read any type of file within the app, without limiting file size, and without blocking the UI thread; it does not increase the size of the source file; it can be implemented on both Android and iOS while maintaining a consistent user experience; the method and system described in this invention simplify the file reading logic, making it simple and universal. Attached Figure Description

[0033] Figure 1 This is a schematic diagram of an in-terminal H5 file reading method according to the present invention.

[0034] Figure 2 This is a schematic diagram of an in-terminal H5 file system reading structure according to the present invention. Detailed Implementation

[0035] To better understand the content of this invention, it will be described in detail with reference to the accompanying drawings and embodiments.

[0036] This invention discloses an in-app H5 file reading method and system. By simulating H5 resource requests, the logic of H5 reading native files is treated as a single HTTP request. The native system checks all H5 requests; if a file reading request is detected, the local file is read; otherwise, the request is allowed and handled by the browser kernel. This invention is primarily used in scenarios where H5 reads native files within a mobile client, such as reading local images and videos.

[0037] HTML5 (H5) is a language for describing how to build web content. HTML5 is the next-generation standard for the internet, a language for building and presenting internet content, and is considered one of the core technologies of the internet.

[0038] The first aspect of this invention relates to a method for reading files via H5 within a client, with the following steps: Figure 1 The method shown includes:

[0039] Deploy and debug the JSBridge environment in both HTML5 and native environments.

[0040] S1. HTML5 triggers a definition file selector enable request command; the definition file selector enable request command is sent to the native source via the JSBridge bridge;

[0041] S2. Native captures the defined file selector enable request command, parses the defined file selector enable request command to obtain the parsing result; defines the file selector according to the parsing result, performs the file selection operation after the file selector is defined, and obtains the file path address; sends the file path address to HTML5 through the JSBridge bridge;

[0042] S3 and HTML5 receive the file path address and trigger a file operation request command, including: creating an XMLHttpRequest object; reading the file path address using the keyword nativeFileReader; and sending the file operation request command to the native object via JSBridge.

[0043] S4. The Native component receives the file operation request command and determines whether the file operation request command contains a file read keyword.

[0044] The file reading keyword is: nativeFileReader.

[0045] If the file operation request command contains the keyword "file read", then the file operation request command is a file read command; execute the file read operation of the file operation request command.

[0046] The file reading operation of executing the file operation request command includes: obtaining the file name based on the Name keyword of the file operation request command, reading the local file based on the file name, obtaining the target file, and encapsulating the target file into a standard response message and returning it.

[0047] If the file operation request command does not contain the file read keyword, then the file operation request command is an HTTP request command and will not be executed.

[0048] S5. Read the returned standard response message, parse the returned standard response message, and obtain the message parsing result. The message parsing result includes at least the file type. Read the file content according to the message parsing result.

[0049] As an embodiment of the in-client H5 file reading method described in this invention, the specific implementation steps are as follows:

[0050] Start reading files within the app:

[0051] 1. H5 uses the jsBridge method to request a custom file selector from native code.

[0052] A custom file selector can be created natively, allowing users to select a file and then returning the file path to the H5 page, such as aa.text.

[0053] 2. After receiving the file path selected by the user, H5 assembles the file read request.

[0054] Create an XMLHttpRequest object, using a URL with the keyword "nativeFileReader" as the request address for file reading, and then use a GET request. For example:

[0055] varxhr=newXMLHttpRequest();

[0056] / / This setting specifies reading a text file; other file types can also be specified.

[0057] xhr.responseType = "text";

[0058] / / This uses the current domain to prevent cross-domain requests. Alternatively, you can use file: / / nativeFileReader for cross-domain requests.

[0059] varurl=window.location.origin+" / nativeFileReader?name=aa.text";

[0060] xhr.open('GET',url,true);

[0061] xhr.send();

[0062] 3. Native client checks whether a request within an H5 page is a file read request (taking Android as an example).

[0063] All requests from H5 pages will pass through the `shouldInterceptRequest` method of `webView`, so we check in this method whether the request URL contains the keyword "nativeFileReader" for file reading:

[0064] If the request URL contains the keyword "nativeFileReader", then it is a file reading operation. The filename is obtained from the name in the URL, the file is read, and the result is returned.

[0065] If the request URL does not contain the keyword "nativeFileReader": it is a normal HTTP request, and no action is taken; allow it to proceed. For example:

[0066]

[0067] File reading has ended.

[0068] Another aspect of this invention relates to an in-client H5 read file system, the structure of which is as follows: Figure 2 As shown, it includes:

[0069] A file selector enable request command triggering module is defined, which is used by HTML5 to trigger the file selector enable request command; the file selector enable request command is sent to the native code via the JSBridge bridge;

[0070] The file selector definition module is used to natively capture the file selector enable request command, parse the file selector enable request command to obtain the parsing result, define the file selector according to the parsing result, perform a file selection operation after the file selector is defined, obtain the file path address, and send the file path address to HTML5 through the JSBridge bridge.

[0071] The file operation request command triggering module is used to receive the file path address in HTML5 and trigger a file operation request command, including: creating an XMLHttpRequest object; reading the file path address through the keyword nativeFileReader; and sending the file operation request command to the native object through JSBridge.

[0072] The file read keyword determination module is used to natively receive the file operation request command and determine whether the file operation request command contains a file read keyword.

[0073] If the file operation request command contains the keyword "file read", then the file operation request command is a file read command; execute the file read operation of the file operation request command.

[0074] If the file operation request command does not contain the file read keyword, then the file operation request command is an HTTP request command and will not be executed.

[0075] The JSBridge bridge environment deployment and debugging module is used to deploy and debug the JSBridge bridge environment in HTML5 and Native.

[0076] The standard response message reading module is used to read the returned standard response message, parse the returned standard response message, and obtain the message parsing result. The message parsing result includes at least: file type, and the file content is read according to the message parsing result.

[0077] By using this system, the aforementioned computational processing methods can be executed and the corresponding technical effects can be achieved.

[0078] The method and system for reading files via H5 in-app as described in this invention enables H5 file reading on both Android and iOS. H5 can read any type of file within the app, without limiting file size, and will not block the UI thread; it will not increase the size of the source file; it can be implemented on both Android and iOS, and maintains a consistent user experience; the method and system described in this invention simplify the file reading logic and are simple and universal.

[0079] Embodiments of the present invention also provide a computer-readable storage medium capable of implementing all the steps of the methods in the above embodiments, wherein the computer-readable storage medium stores a computer program that, when executed by a processor, implements all the steps of the methods in the above embodiments.

[0080] Embodiments of the present invention also provide an electronic device for performing the above-described method. As an implementation device for the method, the electronic device includes at least a processor and a memory. In particular, the memory stores data and related computer programs required for performing the method, such as defining file selector open request commands and file operation request commands. The processor calls the data and programs in the memory to execute all the steps of the method and obtain the corresponding technical effects.

[0081] Preferably, the electronic device may include a bus architecture, which may include any number of interconnected buses and bridges. The bus will include various circuits linked together by one or more processors and memories. The bus may also link together various other circuits such as peripherals, voltage regulators, and power management circuits, which are well known in the art and therefore will not be described further herein. The bus interface provides an interface between the bus and the receiver and transmitter. The receiver and transmitter may be the same element, i.e., a transceiver, providing a unit for communicating with various other systems over a transmission medium. The processor is responsible for managing the bus and general processing, while the memory may be used to store data used by the processor during operation.

[0082] Additionally, the electronic device may further include components such as a communication module, an input unit, an audio processor, a display, and a power supply. The processor (or controller, operating control) used may include a microprocessor or other processor device and / or logic device, which receives input and controls the operation of various components of the electronic device; the memory may be one or more of a buffer, flash memory, hard drive, removable media, volatile memory, non-volatile memory, or other suitable devices, which can store the aforementioned data information, and may also store programs for executing the information, and the processor can execute the program stored in the memory to achieve information storage or processing, etc.; the input unit is used to provide input to the processor, for example, it can be a button or touch input device; the power supply is used to provide power to the electronic device; the display is used to display images and text, for example, it can be an LCD display. The communication module is a transmitter / receiver that transmits and receives signals via an antenna. The communication module (transmitter / receiver) is coupled to the processor to provide input signals and receive output signals, which can be the same as in conventional mobile communication terminals. Based on different communication technologies, multiple communication modules can be incorporated into the same electronic device, such as cellular network modules, Bluetooth modules, and / or wireless LAN modules. The communication module (transmitter / receiver) is also coupled to a speaker and microphone via an audio processor to provide audio output through the speaker and receive audio input from the microphone, thereby enabling typical telecommunications functions. The audio processor can include any suitable buffer, decoder, amplifier, etc. Furthermore, the audio processor is coupled to a central processing unit, enabling on-device recording via the microphone and on-device playback of stored sound via the speaker.

[0083] Those skilled in the art will understand that embodiments of the present invention can be provided as methods, systems, or computer program products. Therefore, the present invention can take the form of a completely hardware embodiment, a completely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, the present invention can take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0084] This invention is described with reference to flowchart illustrations and / or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of the invention. It will be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, special-purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, generate instructions for implementing the flowchart illustrations and / or block diagrams. Figure 1 One or more processes and / or boxes Figure 1 A system that specifies functions in one or more boxes.

[0085] These computer program instructions may also be stored in a computer-readable storage medium that can direct a computer or other programmable data processing device to function in a particular manner, such that the instructions stored in the computer-readable storage medium produce an article of manufacture including an instruction set implemented in a process. Figure 1 One or more processes and / or boxes Figure 1 The function specified in one or more boxes.

[0086] These computer program instructions may also be loaded onto a computer or other programmable data processing equipment to cause a series of operational steps to be performed on the computer or other programmable equipment to produce a computer-implemented process, thereby providing instructions that execute on the computer or other programmable equipment for implementing the process. Figure 1 One or more processes and / or boxes Figure 1 The steps of the functions specified in one or more boxes. Although preferred embodiments of the invention have been described, those skilled in the art, upon learning the basic inventive concept, can make other changes and modifications to these embodiments. Therefore, the appended claims are intended to be interpreted as including the preferred embodiments as well as all changes and modifications falling within the scope of the invention.

[0087] The above description is merely a preferred embodiment of the present invention, but the scope of protection of the present invention is not limited thereto. Any variations or substitutions that can be easily conceived by those skilled in the art within the scope of the technology disclosed in the present invention should be included within the scope of protection of the present invention. Therefore, the scope of protection of the present invention should be determined by the scope of the claims.

Claims

1. A method for reading files using H5 within a client, characterized in that, include: S1, HTML5 triggers the command to open the file selector request; The definition file selector enable request command is sent to the native source via the JSBridge bridge; S2. Native captures the defined file selector enable request command, parses the defined file selector enable request command to obtain the parsing result; defines the file selector according to the parsing result, performs the file selection operation after the file selector is defined, and obtains the file path address; sends the file path address to HTML5 through the JSBridge bridge; S3 and HTML5 receive the file path address and trigger a file operation request command, including: creating an XMLHttpRequest object; reading the file path address using the keyword nativeFileReader; and sending the file operation request command to the native object via JSBridge. S4. The Native component receives the file operation request command and determines whether the file operation request command contains a file read keyword. If the file operation request command contains the keyword "file read", then the file operation request command is a file read command; execute the file read operation of the file operation request command. If the file operation request command does not contain the file read keyword, then the file operation request command is an HTTP request command and will not be executed. Before step S1, the following steps are also included: step Sa, deploying and debugging the JSBridge bridge environment in HTML5 and Native; Native can customize a file selector to allow the user to select a file, and after selection, the file path is returned to H5; S5. Read the returned standard response message, parse the returned standard response message, and obtain the message parsing result. The message parsing result includes at least the file type. Read the file content according to the message parsing result. The file reading operation of executing the file operation request command includes: obtaining the file name based on the Name keyword of the file operation request command, reading the local file based on the file name, obtaining the target file, and encapsulating the target file into a standard response message and returning it.

2. The method as described in claim 1, characterized in that, The file reading keyword is: nativeFileReader.

3. An in-client H5 file system, characterized in that, include: The JSBridge bridge environment deployment and debugging module is used to deploy and debug the JSBridge bridge environment in HTML5 and Native. A custom file selector can be created natively, allowing users to select files and return the file path to the H5 page after selection. A file selector enable request command triggering module is defined, which is used by HTML5 to trigger the file selector enable request command; the file selector enable request command is sent to the native code via the JSBridge bridge; The file selector definition module is used to natively capture the file selector enable request command, parse the file selector enable request command to obtain the parsing result, define the file selector according to the parsing result, perform a file selection operation after the file selector is defined, obtain the file path address, and send the file path address to HTML5 through the JSBridge bridge. The file operation request command triggering module is used to receive the file path address in HTML5 and trigger a file operation request command, including: creating an XMLHttpRequest object; reading the file path address through the keyword nativeFileReader; and sending the file operation request command to the native object through JSBridge. The file read keyword determination module is used to natively receive the file operation request command and determine whether the file operation request command contains a file read keyword. If the file operation request command contains the keyword "file read", then the file operation request command is a file read command; execute the file read operation of the file operation request command. If the file operation request command does not contain the file read keyword, then the file operation request command is an HTTP request command and will not be executed. The standard response message reading module is used to read the returned standard response message, parse the returned standard response message, and obtain the message parsing result. The message parsing result includes at least: file type, and reads the file content according to the message parsing result. The file reading operation of executing the file operation request command includes: obtaining the file name based on the Name keyword of the file operation request command, reading the local file based on the file name, obtaining the target file, and encapsulating the target file into a standard response message and returning it.

4. A computer-readable storage medium, characterized in that, The storage medium stores a computer program, which, when executed by a processor, implements the intra-terminal H5 file reading method as described in any one of claims 1 to 2.

5. An electronic device, characterized in that, Including processor and memory; The memory is used to store the file selector open request command and the file operation request command. The processor is configured to execute the intra-terminal H5 file reading method as described in any one of claims 1 to 2 by invoking a defined file selector to initiate a request command and a file operation request command.

6. A computer program product, comprising a computer program and / or instructions, characterized in that, When the computer program and / or instructions are executed by the processor, they implement the steps of the intra-terminal H5 file reading method as described in any one of claims 1 to 2.

Images