CN115185424A - Uploading method for self-adaptive adjustment of size of file uploading button - Google Patents

Uploading method for self-adaptive adjustment of size of file uploading button Download PDF

Info

Publication number
CN115185424A
CN115185424A CN202210952267.5A CN202210952267A CN115185424A CN 115185424 A CN115185424 A CN 115185424A CN 202210952267 A CN202210952267 A CN 202210952267A CN 115185424 A CN115185424 A CN 115185424A
Authority
CN
China
Prior art keywords
button
file
uploading
upload
small
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Granted
Application number
CN202210952267.5A
Other languages
Chinese (zh)
Other versions
CN115185424B (en
Inventor
宋蓓蓓
周杉
陈清华
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Yunhe Zhiwang Shanghai Technology Co ltd
Original Assignee
Hangzhou Clounix Technology Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Hangzhou Clounix Technology Ltd filed Critical Hangzhou Clounix Technology Ltd
Priority to CN202210952267.5A priority Critical patent/CN115185424B/en
Publication of CN115185424A publication Critical patent/CN115185424A/en
Application granted granted Critical
Publication of CN115185424B publication Critical patent/CN115185424B/en
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/04817Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance using icons
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04845Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
    • HELECTRICITY
    • H04ELECTRIC COMMUNICATION TECHNIQUE
    • H04LTRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
    • H04L67/00Network arrangements or protocols for supporting network services or applications
    • H04L67/01Protocols
    • H04L67/06Protocols specially adapted for file transfer, e.g. file transfer protocol [FTP]

Abstract

The invention discloses an uploading method for adaptively adjusting the size of a file uploading button, which comprises the steps of requesting to create a large button and a small button of a picture type under a human-computer interaction interface by receiving an editing operation step request sent by a user through triggering a corresponding link, and creating a hidden file uploading button below the large button and the small button; and receiving a file uploading operation step request sent by a user through triggering the corresponding link, requesting to click the large button on the human-computer interaction interface, popping up a file selection frame, and after one or more files are selected, displaying one or more uploaded file lists on the human-computer interaction interface, and simultaneously reducing the large button to become the small button. The scheme improves the user experience that pages are blank one by one when no file list exists; the amplified picture button is convenient for a user to click, and the user operation is simplified.

Description

Uploading method for self-adaptive adjustment of size of file uploading button
Technical Field
The invention relates to the technical field of Internet mobile development, in particular to an uploading method for adaptively adjusting the size of a file uploading button.
Background
Currently, many websites include a file processing module, and a user is required to upload a file. Generally, before a file is not uploaded, a page has no data, is blank or is a picture (picture content means no data), then a normal-size "upload" button is arranged on the page, after the "upload" button is clicked, a file selection box is popped up, and after 1 or more files are selected, an uploaded file list appears in the page.
The scheme that a blank page is arranged before the file is uploaded is not adopted, so that the experience feeling of a user is very poor; the scheme that a picture is not uploaded before is adopted, so that the user can experience the picture, but an uploading button on the page is definitely smaller than the picture, a mouse needs to be moved to the small picture button, and the operation is not very friendly.
Disclosure of Invention
According to the embodiment of the invention, an uploading method for adaptively adjusting the size of a file uploading button is provided, an interface frame and a plurality of operation steps are preset, and the method comprises the following steps:
generating a link corresponding to the selected operation step on the interface frame according to the selected operation steps, wherein the operation steps comprise an editing operation step, a file uploading operation step and an uploading information display operation step;
displaying the corresponding link on the interface frame as a human-computer interaction interface;
receiving an editing operation step request sent by a user through triggering a corresponding link, requesting to create a large button and a small button of a picture type under a human-computer interaction interface, and creating a hidden file uploading button below the large button and the small button;
receiving a file uploading operation step request sent by a user through triggering a corresponding link, requesting to click a large button on a human-computer interaction interface, popping up a file selection frame, and after one or more files are selected, one or more file lists uploaded on the human-computer interaction interface can appear, and simultaneously the large button can be reduced and changed into a small button;
and receiving an uploading information display operation step request sent by a user through triggering a corresponding link, and displaying prompt information of an uploading state after a small button is touched on a human-computer interaction interface.
Further, the interface frame is a vue frame.
Further, creating a sub-component within the vue framework; creating a response variable showBig in the js part of the sub-component, and setting the default value of the response variable showBig to be true; in the js part of the sub-component, a method changeBig is authored, the value of the enlistment is assigned to showBig, and the method changeBig is exposed to the parent component calling the method changeBig.
Further, creating a big button and a small button of a picture type under a human-computer interaction interface comprises the following substeps:
in the HTML part of the sub-component, a big button and a small button of the picture type are created;
adding a style of class = 'big' to the big button for setting the width, height of the big button to 400px, and the position is the vertical center of the page layout;
setting default width and height of 30px for the small button, wherein the position is the upper left of the page layout;
wrapping a div label on the outer layer of each of the large button and the small button;
a single-click event binding method "triggerUpload" for a large button and a small button;
in the js part of the sub-component, a method 'triggerUpload' is written, and a single-click event for triggering a hidden file upload button is realized.
Further, the attribute "v-show" is added to the div tag, and for the small button, the added attribute value is "!showbig", and for the large button, the added attribute value is "showBig".
Further, creating a hidden file upload button under the big and small buttons comprises the sub-steps of:
in the HTML part of the sub-component, a file uploading button is established below the large button and the small button;
adding a hidden attribute to a file uploading button, and hiding the file uploading button;
a change event binding 'chosenFile' method for a file uploading button;
in the js part of the sub-component, a method 'cholesenfile' is written to realize the corresponding function.
Further, the corresponding functions include: uploading the file to a background; transmitting the false to a changeBig method, setting showBig as the false, and controlling a small display button; and displaying the list of the transmitted files.
Further, if the parent component provides a function of deleting the uploaded file in the uploaded file list, after the file is deleted and the file list is empty, after the file is deleted, the true is transferred to a changeBig method exposed by the child component, the showBig of the child component is set as true, and the large button is controlled to be displayed.
Further, a large button is displayed to the user on the human-computer interaction interface before the request for the editing operation step is not sent.
According to the uploading method for adaptively adjusting the size of the file uploading button, the user experience that pages are blank when no file list exists is improved; meanwhile, the amplified picture button is convenient for the user to click, the operation of the user is simplified, and the user experience is optimized.
It is to be understood that both the foregoing general description and the following detailed description are exemplary and are intended to provide further explanation of the claimed technology.
Drawings
FIG. 1 is a schematic diagram of a page showing buttons of large picture types according to an embodiment of the present invention.
Fig. 2 is a diagram illustrating a prompt for an upload status according to an embodiment of the present invention.
Fig. 3 is a flowchart of an uploading method for adaptively adjusting the size of a file upload button according to an embodiment of the present invention.
Fig. 4 is a flowchart illustrating a first sub-step of an uploading method with adaptive adjustment of a file upload button size according to an embodiment of the present invention.
Fig. 5 is a flowchart illustrating a second sub-step of an uploading method with adaptive adjustment of a file upload button size according to an embodiment of the present invention.
Detailed Description
The present invention will be further explained by the following detailed description of preferred embodiments thereof, which is to be read in connection with the accompanying drawings.
First, an uploading method for adaptively adjusting the size of a file uploading button according to an embodiment of the present invention is described with reference to fig. 1 to 5, so as to improve user experience and provide good operability of a page, and the application scenarios are wide.
As shown in fig. 1 to 5, in an upload method for adaptively adjusting a size of a file upload button according to an embodiment of the present invention, an interface frame and a plurality of operation steps are preset, and the method includes the following steps:
as shown in fig. 3, in S1, a link corresponding to the selected operation step is generated on the interface frame according to the selected plurality of operation steps, and the operation steps include an editing operation step, a file upload operation step, and an upload information display operation step. In this embodiment, the interface frame is a vue frame.
Further, creating a sub-component within the vue framework; creating a response variable showBig in the js part of the sub-component, and setting the default value of the response variable showBig to be true; in the js part of the sub-component, a method changeBig is written, the value of the enlistment is given to showBig, and the method changeBig is exposed to the parent component calling the method changeBig.
As shown in fig. 3, in S2, the corresponding link is displayed on the interface frame as a human-computer interaction interface;
as shown in fig. 3, in S3, an edit operation step request sent by a user by triggering a corresponding link is received, a large button and a small button of a picture type are requested to be created under a human-computer interaction interface, and a hidden file upload button is created under the large button and the small button.
Further, as shown in fig. 4, creating a large button and a small button of a picture type under a human-machine interaction interface comprises the following substeps (first substeps):
as shown in fig. 4, in S31, in the HTML part of the sub-component, a large button and a small button of the picture type are created;
as shown in fig. 4, in S32, a style of class = 'big' is added to the large button for setting the width, height, and position of the large button to 400 px;
as shown in fig. 4, in S33, a default width and height of 30px are set for the small button, with the position being the upper left of the page layout;
as shown in fig. 4, in S34, a div label is wrapped around each of the large button and the small button; in this embodiment, the attribute "v-show" is added to the div tag, and the added attribute value is "| showBig" for the small button and "showBig" for the large button.
As shown in fig. 4, in S35, the single-click event binding method "triggerUpload" for the large button and the small button;
as shown in fig. 4, in S36, in the js section of the subcomponent, a method "triggerUpload" is written, implementing a single-click event that triggers a hidden file upload button.
Further, as shown in fig. 5, creating a hidden file upload button below the big button and the small button comprises the sub-steps of:
as shown in fig. 5, in S301, in the HTML part of the sub-component, and below the large button and the small button, a file upload button is created;
as shown in fig. 5, in S302, a hidden attribute is added to the file upload button to hide the file upload button;
as shown in fig. 5, in S303, a change event for the file upload button is bound to the "chosenFile" method;
as shown in fig. 5, in S304, in the js section of the sub-component, the method "chosenFile" is written, and the corresponding function is implemented. In this embodiment, the corresponding functions include: uploading the file to a background; transferring false to a changeBig method, setting showBig as false, and controlling a small display button; and displaying the uploaded file list.
Further, a large button is displayed to the user on the human-computer interaction interface before the request for the editing operation step is not sent.
As shown in fig. 3, in S4, a file uploading operation step request sent by a user through triggering a corresponding link is received, a large button is clicked on a human-computer interaction interface, a file selection box is popped up, after one or more files are selected, one or more file lists to be uploaded appear on the human-computer interaction interface, and at the same time, the large button is reduced to become a small button, which is located at the upper left of the list as shown in the figure, or at a position in the direction of the list;
as shown in fig. 3, in S5, an upload information display operation step request sent by a user by triggering a corresponding link is received, and after a small button is touched on a human-computer interaction interface, prompt information of an upload state is displayed.
Further, if the parent component provides a function of deleting the uploaded file in the uploaded file list, when the file list is empty after the file is deleted, the true is transferred to a changeBig method exposed by the sub component after the 'delete' is clicked, the showBig of the sub component is set as true, and a big button is controlled and displayed.
In the above, with reference to fig. 1 to 5, the uploading method for adaptively adjusting the size of the file uploading button according to the embodiment of the present invention is described, so that the user experience that when there is no file list, pages are blank one by one is improved; meanwhile, the amplified picture button is convenient for the user to click, the operation of the user is simplified, and the user experience is optimized.
It should be noted that, in the present specification, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrases "comprising 8230; \8230;" comprises 8230; "does not exclude the presence of additional like elements in a process, method, article, or apparatus that comprises the element.
While the present invention has been described in detail with reference to the preferred embodiments, it should be understood that the above description should not be taken as limiting the invention. Various modifications and alterations to this invention will become apparent to those skilled in the art upon reading the foregoing description. Accordingly, the scope of the invention should be determined from the following claims.

Claims (9)

1. An uploading method for self-adaptively adjusting the size of a file uploading button is characterized in that an interface frame and a plurality of operation steps are preset, and the method comprises the following steps:
generating a link corresponding to the selected operation step on the interface frame according to the selected operation steps, wherein the operation steps comprise an editing operation step, a file uploading operation step and an uploading information display operation step;
displaying the corresponding link on the interface frame as a human-computer interaction interface;
receiving an editing operation step request sent by a user through triggering the corresponding link, requesting to create a large button and a small button of a picture type under the human-computer interaction interface, and creating a hidden file uploading button under the large button and the small button;
receiving a file uploading operation step request sent by a user through triggering the corresponding link, requesting to click the large button on the human-computer interaction interface, popping up a file selection frame, and after one or more files are selected, enabling the uploaded one or more file lists to appear on the human-computer interaction interface, and enabling the large button to be reduced and changed into the small button;
and receiving an uploading information display operation step request sent by a user through triggering the corresponding link, and displaying prompt information of an uploading state after the small button is touched on the human-computer interaction interface.
2. The file upload button size adaptive adjustment upload method of claim 1, wherein the interface frame is a vue frame.
3. The file upload button size adaptive adjustment upload method of claim 2, wherein a subcomponent is created within the vue frame; creating a response variable showBig in the js part of the sub-component, and setting a default value of true for the response variable showBig; writing a method changeBig on a js part of the sub-component, assigning the value of the entry to showBig, and exposing the method changeBig to a parent component calling the method changeBig.
4. The file upload button size adaptive adjustment upload method of claim 3, wherein creating a big button and a small button of a picture type under the human-computer interaction interface comprises the sub-steps of:
creating a big button and a small button of a picture type in an HTML portion of the sub-component;
adding a style of class = 'big' to the big button for setting the width and height of the big button to 400px, and the position is the vertical center of the page layout;
setting default width and height of 30px for the small button, wherein the position is the upper left of the page layout;
wrapping a div label on the outer layer of each of the large button and the small button;
a click event binding method 'triggerUpload' for the big button and the small button;
in the js part of the sub-component, a method 'triggerUpload' is written to trigger a hidden single-click event of the file upload button.
5. The file upload button size adaptive adjustment upload method of claim 4, wherein an attribute "v-show" is added to the div tag, and for the small button, the added attribute value is "| showBig", and for the large button, the added attribute value is "showBig".
6. The file upload button size adaptive adjustment upload method of claim 3, wherein creating a hidden file upload button below said large button and said small button comprises the sub-steps of:
creating a file uploading button in an HTML part of the sub-component and below the large button and the small button;
adding a hidden attribute to the file uploading button and hiding the file uploading button;
a "chosenFile" method is bound to a change event of the file upload button;
in the js part of the sub-component, a method 'cholesenfile' is written to realize the corresponding function.
7. The adaptive file upload button size adjustment upload method of claim 6, wherein the corresponding functions comprise: uploading the file to a background; transmitting the false to a changeBig method, setting showBig as the false, and controlling a small display button; and displaying the uploaded file list.
8. The uploading method with self-adaptive file uploading button size adjustment as claimed in claim 3, wherein if the parent component provides a function of deleting the uploaded files in the uploaded file list, when the file list is empty after the file is deleted, after clicking "delete", it is necessary to transfer true to the changeBig method exposed by the sub-component, set showBig of the sub-component as true, and control and display a big button.
9. The file upload button size adaptive adjustment upload method of claim 1, wherein one of the large buttons is displayed to a user on the human-machine interface before an edit manipulation step request is not transmitted.
CN202210952267.5A 2022-08-09 2022-08-09 Uploading method for adaptively adjusting size of file uploading button Active CN115185424B (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202210952267.5A CN115185424B (en) 2022-08-09 2022-08-09 Uploading method for adaptively adjusting size of file uploading button

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202210952267.5A CN115185424B (en) 2022-08-09 2022-08-09 Uploading method for adaptively adjusting size of file uploading button

Publications (2)

Publication Number Publication Date
CN115185424A true CN115185424A (en) 2022-10-14
CN115185424B CN115185424B (en) 2023-11-21

Family

ID=83523506

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202210952267.5A Active CN115185424B (en) 2022-08-09 2022-08-09 Uploading method for adaptively adjusting size of file uploading button

Country Status (1)

Country Link
CN (1) CN115185424B (en)

Citations (11)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2006318199A (en) * 2005-05-12 2006-11-24 Shimadzu Corp Display controller and program
TW201115452A (en) * 2009-10-21 2011-05-01 Mitac Int Corp Method of improving the accuracy of selecting a soft button displayed on a touch-sensitive screen and related portable electronic device
CN102073442A (en) * 2009-11-25 2011-05-25 神达电脑股份有限公司 Method for inputting instruction through touch screen of portable electronic device
CN102792250A (en) * 2010-03-05 2012-11-21 日本电气株式会社 Portable terminal device
KR20140002284A (en) * 2012-06-28 2014-01-08 주식회사 아하정보통신 Method of producing and real time size canging method of menu button of marking progeam for electronic board
CN108614653A (en) * 2018-03-18 2018-10-02 平安科技(深圳)有限公司 The adaptive method, apparatus of button, mobile terminal and storage medium
CN108803958A (en) * 2017-04-26 2018-11-13 腾讯科技(深圳)有限公司 File is loaded into the exchange method and device that upload is realized in control, cloud storage application
CN108845731A (en) * 2018-05-30 2018-11-20 努比亚技术有限公司 Application icon control method, wearable device and computer readable storage medium
US20200404048A1 (en) * 2019-06-24 2020-12-24 Screenovate Technologies Ltd. Method and a system for controlling multimedia file on external screen device
US20220011909A1 (en) * 2020-07-08 2022-01-13 Boe Technology Group Co., Ltd. Devices and methods of intelligent interaction, and storage media
WO2022083003A1 (en) * 2020-10-21 2022-04-28 安徽鸿程光电有限公司 Touch-control screen magnifier calling method, apparatus, electronic device, and storage medium

Patent Citations (11)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2006318199A (en) * 2005-05-12 2006-11-24 Shimadzu Corp Display controller and program
TW201115452A (en) * 2009-10-21 2011-05-01 Mitac Int Corp Method of improving the accuracy of selecting a soft button displayed on a touch-sensitive screen and related portable electronic device
CN102073442A (en) * 2009-11-25 2011-05-25 神达电脑股份有限公司 Method for inputting instruction through touch screen of portable electronic device
CN102792250A (en) * 2010-03-05 2012-11-21 日本电气株式会社 Portable terminal device
KR20140002284A (en) * 2012-06-28 2014-01-08 주식회사 아하정보통신 Method of producing and real time size canging method of menu button of marking progeam for electronic board
CN108803958A (en) * 2017-04-26 2018-11-13 腾讯科技(深圳)有限公司 File is loaded into the exchange method and device that upload is realized in control, cloud storage application
CN108614653A (en) * 2018-03-18 2018-10-02 平安科技(深圳)有限公司 The adaptive method, apparatus of button, mobile terminal and storage medium
CN108845731A (en) * 2018-05-30 2018-11-20 努比亚技术有限公司 Application icon control method, wearable device and computer readable storage medium
US20200404048A1 (en) * 2019-06-24 2020-12-24 Screenovate Technologies Ltd. Method and a system for controlling multimedia file on external screen device
US20220011909A1 (en) * 2020-07-08 2022-01-13 Boe Technology Group Co., Ltd. Devices and methods of intelligent interaction, and storage media
WO2022083003A1 (en) * 2020-10-21 2022-04-28 安徽鸿程光电有限公司 Touch-control screen magnifier calling method, apparatus, electronic device, and storage medium

Also Published As

Publication number Publication date
CN115185424B (en) 2023-11-21

Similar Documents

Publication Publication Date Title
US7234107B1 (en) System for customizing web page
US9098597B2 (en) Presenting and managing clipped content
US20030236836A1 (en) System and method for the design and sharing of rich media productions via a computer network
KR101159390B1 (en) Method and system for displaying and interacting with paginated content
US20090132907A1 (en) Annotation Structure for Web Pages, System and Method for Annotating Web Pages
US20040268232A1 (en) Pane Element
EP2417539A2 (en) Document editing method
KR20090013267A (en) Contents production apparatus and method using user data
JP2003529141A (en) Composition and emulation of website content to be displayed on another device by using one device
WO2012075284A2 (en) A website file and data structure, website management platform and method of manufacturing customized, managed websites
AU2018279309C1 (en) System and method for smart interaction between website components
WO2023109789A1 (en) Information processing method and apparatus, storage medium, and electronic device
JP2001034249A (en) Picture communication system
CN109074209B (en) Details pane for user interface
KR100861052B1 (en) A method of web browser application service and recording media
CN115185424B (en) Uploading method for adaptively adjusting size of file uploading button
CN113792208B (en) Picture interaction method, device, equipment, medium and program product based on webpage
CN113901776A (en) Audio interaction method, medium, device and computing equipment
WO2020163972A1 (en) Systems and methods for generating documents from video content
GB2473396A (en) Data Object Management
CN112800365A (en) Expression package processing method and device and intelligent device
Powers The essential guide to Dreamweaver CS4 With CSS, Ajax, and PHP
JP2000284878A (en) Portable type information terminal device
CN114063869A (en) Form configuration method and device and electronic equipment
CN116361575A (en) Display device and browser privacy mode tag page display method

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant
CP03 Change of name, title or address

Address after: 3 / F, 665 Zhangjiang Road, China (Shanghai) pilot Free Trade Zone, Pudong New Area, Shanghai

Patentee after: Yunhe Zhiwang (Shanghai) Technology Co.,Ltd.

Country or region after: China

Address before: 311203 floor 12, building 2, Purple Orange International Center, No. 39, Jincheng Road, Xiaoshan District, Hangzhou, Zhejiang Province

Patentee before: Hangzhou yunhezhi Network Technology Co.,Ltd.

Country or region before: China

CP03 Change of name, title or address