Summary of the invention
The present invention provides the method for the data in a kind of text input frame of preserving webpage; Through the text input frame of webpage, realized various data, for example text, picture or file are in the rapid saving of server side; Greatly improve user's operating efficiency, thereby improved user experience.
The method of the data in the text input frame of preservation webpage of the present invention comprises :-after the text input frame of webpage loads completion, generate the superposed layer that covers on the said text input frame;
-detect incident to said text input frame input data, obtain said input data;
-according to the data type of said input data, the plain and/or self-defined html element of html element that in the superposed layer of said text input frame, generates said data is plain;
-detect submission incident to the input data of said text input frame;
-plain and/or self-defined html element element is encoded with the html element of said generation, and upload, preserve the plain and/or self-defined html element element of the html element of said coding to server side.
Wherein, The step that said generation covers the superposed layer on the said text input frame comprises: after the said text input frame of webpage loads the completion Event triggered, call the customized treatment function that is provided by web browser and generate the superposed layer that covers on the said text input frame; Wherein, said superposed layer comprises DI V layer.Further, the said step that detects to the incident of said text input frame input data comprises: the ondragenter and the ondragover incident that detect said superposed layer and/or text input frame; Or detect the onbeforepaste and the onpaste incident of said superposed layer and/or text input frame.
Through the above-mentioned superposed layer that comprises the DIV layer that covers on the said text input frame; Realized comprising the input of the data of text, picture and/or file; And supported literal key entry, duplicate, pull; And the duplicating, pull of picture or file, greatly simplified the troublesome operation of existing various data inputs.
According to method of the present invention, dissimilar input data, it is plain in the superposed layer of said text input frame, can both to generate the plain and/or self-defined html element of corresponding html element, wherein:
When said input data were text, the plain step that generates of the plain and/or self-defined html element of said html element comprised: with the content of the said text of corresponding html tag mark, plain to be converted into the corresponding html element of said text.
When said input data were picture, the plain step that generates of the plain and/or self-defined html element of said html element comprised: said picture is uploaded to figure bed server, and from scheming the chained address that the bed server obtains said picture; And with the said picture of IMG label of HTML, plain to be converted into the corresponding html element of said picture, the source attribute of wherein said IMG label is the chained address of said picture.
When said input data were file, the plain step that generates of the plain and/or self-defined html element of said html element comprised: said file is uploaded to file server, and obtain the chained address of said file from file server; And with the said file of self-defined html tag mark, plain to be converted into the corresponding self-defined html element of said file, the source attribute of wherein said customized label is the chained address of said file.For example, said file comprises PDF or PPT file, and then said self-defined html element element is self-defining PDF or PPT element.
It is thus clear that; Data to text or picture/mb-type; The method of the invention has generated conventional HTML leading element; And for the file data such as PDF or PPT file, it is plain to have generated the self-defined html element that uses self-defined html tag, wherein said self-defined html tag be said web browser can support self-defining<pDF></PDF>Or<pPT></PPT>Label.
When detecting the submission incident of input data, use encoding and decoding such as BASE64 to the corresponding html element of various data plain and/or self-defined html element element encode, and with the side that uploads onto the server of the mode such as the PLAIN text; The control that wherein said submission incident is said text input frame loses focus, or the submit button of said text input frame is clicked.
Further, the present invention also provides a kind of above-mentioned text input frame method of coding data of having preserved that is used to show, comprising:
-to download the plain and/or self-defined html element of html element of said coding from server side plain;
-the html element element and/or the self-defined html element element of said coding carried out the correspondence decoding;
-show that said html element element corresponding data and/or self-defined html element are plain.
Wherein, have the chained address of image data in the said html element element, then said step display comprises: according to the chained address of said picture, download and show said picture.
Wherein, have the chained address of file data in the said self-defined html element element, then said step display:, download said file according to the chained address of said file data; And call the corresponding browser plug-in or the said file of corresponding browser side application program displays of said file.
On the other hand, the present invention also provides the device of the data in a kind of text input frame of preserving webpage, comprising:
-superposed layer generation unit, it is configured to after the text input frame of webpage loads completion, generate the superposed layer that covers on the said text input frame;
-data capture unit, it is configured to detect the incident to said text input frame input data, obtains said input data;
The plain generation unit of the plain and/or self-defined html element of-html element, it is configured to the data type according to said input data, and the plain and/or self-defined html element of html element that in the superposed layer of said text input frame, generates said data is plain;
-submit detecting unit to, it is configured to detect the submission incident to the input data of said text input frame;
-coding uploading unit, it is configured to the html element of said generation plain and/or self-defined html element element and encodes, and uploads, preserves the plain and/or self-defined html element element of the html element of said coding to server side.
Further, the present invention also provides a kind of device that is used to show the text input frame coded data of preserving according to preceding method, comprising:
-download unit, it is configured to download from server side the plain and/or self-defined html element element of html element of said coding;
-decoding unit, it is configured to the html element element of said coding and/or self-defined html element element are carried out the correspondence decoding;
-display unit, it is configured to show plain corresponding data of said html element and/or self-defined html element element.
According to the method for the invention, via the text input frame of webpage, realized that text, picture and/or file to the uploading fast, preserve of server side, greatly simplified user's operation.Wherein, For picture and/or file; What upload to server side is that it has comprised the web page element in the URL address of figure on the bed/data server, as long as said web page element is uploaded completion, need not wait until whether picture or file are accomplished to scheming uploading of bed/data server; Promptly show to upload and preserve successfully, improved user experience to the user.
Above-mentioned explanation only is the general introduction of technical scheme of the present invention; Understand technological means of the present invention in order can more to know; And can implement according to the content of instructions, and for let above and other objects of the present invention, feature and advantage can be more obviously understandable, below special act embodiment of the present invention; And conjunction with figs., specify as follows.
Embodiment
The invention provides a kind of method of the data in the text input frame of preservation of webserver side and display web page, will be described with reference to the accompanying drawings as follows below.
Fig. 1 shows the method for the data in the text input frame of preservation webpage according to the invention, comprising: step 11, the text input frame of webpage load accomplish after, generate the superposed layer that covers on the said text input frame; Step 12 detects the incident to said text input frame input data, obtains said input data; Step 13, according to the data type of said input data, the plain and/or self-defined html element of html element that in the superposed layer of said text input frame, generates said data is plain; Step 14 detects the submission incident to the input data of said text input frame; And step 15, plain and/or self-defined html element element is encoded with the html element of said generation, and uploads, preserves the plain and/or self-defined html element element of the html element of said coding to server side.
For step 11, after the said text input frame textarea of webpage loads the completion Event triggered, call the customized treatment function that provides by web browser and generate the superposed layer that covers on the said text input frame, said superposed layer comprises a DIV layer.Wherein, said customized treatment function can weave at the web browser place in advance, is used to generate this superposed layer.Because DIV is range upon range of is added on the textarea, the DIV layer can receive alternative events in advance and handles than textarea, has realized thus on textarea reception and processing such as polytype data of text, picture or file.
For step 12; The incident that detects text input frame input data comprises ondragenter and the ondragover incident that detects said superposed layer and/or text input frame, or detects the onbeforepaste and the onpaste incident of said superposed layer and/or text input frame.
Especially, when local file/picture was dragged to the superposed layer that comprises the DIV layer, the ondragenter of DIV and ondragover incident were triggered.Forbid pulling data under some browser default situations such as IE, therefore need the default treatment of shielding harness to DIV.When the object that is pulled discharged on DIV, the Ondrop incident of DIV was triggered, and the HTML translation data of above-mentioned generation was added being written among the DIV that has generated.
Perhaps, when the file/picture in this locality copied to the superposed layer that comprises the DIV layer through clipbook, the onbeforepaste of DIV and onpaste incident were triggered.Forbid copy data under some browser default situations such as IE, therefore need the default treatment of shielding harness to DIV.When the onpaste of DIV incident is triggered, the HTML translation data of above-mentioned generation added being written among the DIV that has generated.
For step 13, according to various data type, text for example, picture or file, it is plain to generate the plain and/or self-defined html element of the corresponding html element of said input data.Especially,, in the ondrop or onpaste incident of DIV,, call the client-side program code, convert corresponding file/picture to HTML code, be inserted among the DIV through the external interface for picture that pulls or duplicate or file.
To different data types, specify step 13 below.
1) when going into data when being text
With the content of the said text of corresponding html tag mark, plain to be converted into the corresponding html element of said text.
In the corresponding html element element of text, can also come being configured with attributes such as size, style such as font size, display mode etc.Therefore, the present invention can support formatted text as data to be imported.
2) when the input data are picture
Said picture is uploaded to figure bed server, and from scheming the chained address that the bed server obtains said picture; And with the said picture of IMG label of HTML, plain to be converted into the corresponding html element of said picture, the source attribute of wherein said IMG label is the chained address of said picture.
For example, <img>identifies this picture with label, and points to the chained address URL of this picture with the src attribute, thereby converts thereof into corresponding html element element.
3) when the input data are file
Said file is uploaded to file server, and obtain the chained address of said file from file server; And with the said file of self-defined html tag mark, plain to be converted into the corresponding self-defined html element of said file, the source attribute of wherein said customized label is the chained address of said file.
For example, for PPT or pdf document,, plain to be converted into corresponding self-defined html element with this chained address URL of the discernible self-defined html tag of web browser like said files of mark such as < PPT >, < pdf >.Certainly, those skilled in the art understand, and said file is not limited to PPT, the file of PDF type.
For step 14,15, when detecting the submission incident of said input data, the plain and/or self-defined html element element of the html element that the various data of said generation are corresponding is encoded, and the element of uploading, preserve said coding is to server side.
Wherein, the control that said submission incident is said text input frame loses focus, or the submit button of said text input frame is clicked; During coding, can use the BASE64 encoding and decoding that said html element element and/or self-defined html element element are encoded; Then, html element element that is encoded and/or self-defined html element element are uploaded with the PLAIN text mode and are saved to server side.Certainly, those skilled in the art also know, and can use other decoding methods that are fit to come element is encoded, and also can use other modes to upload the element that is encoded.
Fig. 2 shows the text input frame method of coding data that is used to show according to the present invention and is preserved, and comprising: step 21, and the plain and/or self-defined html element of html element of downloading said coding from server side is plain; Step 22, plain and/or self-defined html element element carries out correspondence and decodes to the html element of said coding; With step 23, show that plain corresponding data of said html element and/or self-defined html element are plain.
For step 21; 22; Plain from the coding html element that server side is downloaded, code used method corresponding decoding method is decoded to it when using and uploading, and for example when uploading, uses BASE64 to encode; Then use BASE64 that coding html element element is decoded equally, thereby it is plain to obtain the plain and/or self-defined html element of the corresponding html element of said data.
For the data of text, because said html element element is conventional HTML leading element, wherein comprised content of text and attribute, web browser can directly show said content of text.
For the data of picture/mb-type, because said html element element is conventional HTML leading element, wherein comprised the chained address of picture at figure bed server, web browser is directly from the said figure said picture of bed downloaded and the content that directly Shows Picture.
For the data of file type, its corresponding self-defined html element element has comprised self-defined html tag, and the source attribute of said self-defined html tag is the chained address of said file.Web browser can show that said self-defined html element is plain, clicks said chained address via the user, to download said file from file server; Call the corresponding browser plug-in or the said file of corresponding browser side application program displays of said file then.
To combine Fig. 3 below is the application that example is introduced the method for the invention with the issue microblogging.
The user can directly pull picture or copy in the text input frame of the microblogging issue page; Simultaneously, literal can be keyed in through computer keyboard, also can be through pulling or copy in the text input frame.
After web browser detected the data incoming event, it was plain to have generated the corresponding html element of said text and picture in the superposed layer on said text input frame.Especially; Said picture can be uploaded to the figure bed server such as 360 companies of Qihoo; Obtain the chained address of said picture on figure bed server, and said chained address is set to the source attribute of the plain IMG label that is comprised of the corresponding html element of said picture.Certainly, except literal and picture, can also in this text input frame, pull or the data of xcopy type, such as PPT file or pdf document, generate corresponding self-defined html element this moment in the superposed layer of text input frame plain.
When said text input frame lost focus or user and clicks the Publish button, the said html element element in the superposed layer was carried out the BASE64 coding, and is uploaded to the microblogging server with the PLAIN text mode, and showed to the user and to issue successfully.
Use input data save method according to the invention, can in microblogging is issued the text input frame of the page, realize the diversiform data input of text, picture and file, greatly simplified the loaded down with trivial details step of user input data.And, when plain and/or self-defined html element element is uploaded to the microblogging server when the html element that is encoded, show to the user promptly and issue successfully that the picture or the file of big data quantity possibly also uploaded on the backstage in fact at this moment, but the user is invisible.Thus, the present invention has realized the quick issue of data such as picture, file in this locality, and has improved user experience.
Show said when uploading the data of preservation; When promptly on web browser, showing above-mentioned microblogging content; The html element of downloading the BASE64 coding from the microblogging server requests is plain; Then it is carried out BASE 64 decoding, and show the plain corresponding data of said html element, comprising display text with from the figure bed downloaded picture of 360 companies and Show Picture.
Fig. 4 shows an embodiment of the device of the data in the text input frame of preservation webpage according to the invention; Said device comprises: superposed layer generation unit 41; It is configured to after the text input frame of webpage loads completion, generate the superposed layer that covers on the said text input frame; Data capture unit 42, it is configured to detect the incident to said text input frame input data, obtains said input data; The plain generation unit 43 of the plain and/or self-defined html element of html element, it is configured to the data type according to said input data, and the plain and/or self-defined html element of html element that in the superposed layer of said text input frame, generates said data is plain; Submit detecting unit 44 to, it is configured to detect the submission incident to the input data of said text input frame; And coding uploading unit 45, it is configured to the html element of said generation plain and/or self-defined html element element and encodes, and uploads, preserves the plain and/or self-defined html element element of the html element of said coding to server side.
Further; When said input data are text; The plain generation unit of the plain and/or self-defined html element of said html element comprises the text subelement, and it is configured to: with the content of the said text of corresponding html tag mark, plain to be converted into the corresponding html element of said text.
When said input data were picture, the plain generation unit of the plain and/or self-defined html element of said html element comprised the picture subelement, and it is configured to: said picture is uploaded to figure bed server, and from scheming the chained address that the bed server obtains said picture; And with the said picture of IMG label of HTML, plain to be converted into the corresponding html element of said picture, the source attribute of wherein said IMG label is the chained address of said picture.
When said input data were file, the plain generation unit of the plain and/or self-defined html element of said html element comprised the file subelement, and it is configured to: said file is uploaded to file server, and obtain the chained address of said file from file server; And with the said file of self-defined html tag mark, plain to be converted into the corresponding self-defined html element of said file, the source attribute of wherein said customized label is the chained address of said file.
Wherein, said file comprises PDF or PPT file, and then said self-defined html element element is self-defining PDF or PPT element.
Fig. 5 shows an embodiment of the device of the text input frame coded data that is used to show according to the present invention and is preserved, and said device comprises: download unit 51, and its plain and/or self-defined html element of html element that is configured to download from server side said coding is plain; Decoding unit 52, it is configured to the html element element of said coding and/or self-defined html element element are carried out the correspondence decoding; Display unit 53, it is configured to show plain corresponding data of said html element and/or self-defined html element element.
Further, have the chained address of image data in the said html element element, then said display unit is configured to: according to the chained address of said picture, download and show said picture.
Have the chained address of file data in the said self-defined html element element, then said display unit is configured to: according to the chained address of said file data, download said file; And call the corresponding browser plug-in or the said file of corresponding browser side application program displays of said file.
Method among the invention described above embodiment, device and server are applicable in diverse network or the client environment; For example can be implemented in the computer equipment such as PC device, perhaps can be implemented in such as in other portable electric appts such as mobile phone, mobile communication equipment, PDA(Personal Digital Assistant) or the non-portable electric appts.What therefore those skilled in the art will be clear and definite is; Protection scope of the present invention is not limited to PC and goes up the data input function in the running browser, only is that data input function that adopted PC to go up in the running browser is in embodiments of the present invention described from the succinct and convenient of description.
Above embodiment only is used to technical scheme of the present invention is described, is not limited to protection scope of the present invention.Under the situation of spirit that does not break away from technical scheme of the present invention and scope, those skilled in the art can carry out various modifications or modification to technical scheme of the present invention.