[发明专利]文件上传按钮大小自适应调整的上传方法

说明书

本发明公开了一种文件上传按钮大小自适应调整的上传方法，通过接收用户通过触发所述对应的链接发送的编辑操作步骤请求，请求在所述人机交互界面下创建图片类型的大按钮和小按钮，并在所述大按钮和所述小按钮下方创建一个隐藏的文件上传按钮；接收用户通过触发所述对应的链接发送的文件上传操作步骤请求，请求在所述人机交互界面上点击所述大的按钮，弹出文件选择框，选择一个或多个文件之后，所述人机交互界面上会出现上传的所述一个或多个文件列表，同时所述大按钮会缩小，变成所述小按钮。本案改善了无文件列表时，页面一片空白的用户体验；放大的图片按钮，方便用户去点击，简化了用户操作。

技术领域

本发明涉及互联网移动开发技术领域，特别涉及一种文件上传按钮大小自适应调整的上传方法。

背景技术

目前，很多网站都包含有文件处理模块，需要用户去做上传文件的操作。一般地，未上传文件之前，页面上没有数据，是一片空白或者是一个图片（图片内容就是没有数据的意思），然后在页面上会有一个正常大小的“上传”按钮，点击“上传”之后，会弹出文件选择框，选择1个或多个文件之后，页面中会出现上传的文件列表。

没有上传文件之前是一片空白的页面的方案，对于用户来说体验感非常差；而没有上传图片之前是一个图片的方案，对于用户来说体验感还可以，但是页面上的“上传”按钮，相对于图片来说肯定是比较小的，需要将鼠标移动到小的图片按钮上，操作性不是很友好。

发明内容

根据本发明实施例，提供了一种文件上传按钮大小自适应调整的上传方法，预先设置一个界面框架、多个操作步骤，方法包含如下步骤：

根据选择的多个操作步骤，在界面框架上生成与选择的操作步骤对应的链接，操作步骤包含编辑操作步骤、文件上传操作步骤以及上传信息显示操作步骤；

将对应的链接在界面框架上显示为人机交互界面；

接收用户通过触发对应的链接发送的编辑操作步骤请求，请求在人机交互界面下创建图片类型的大按钮和小按钮，并在大按钮和小按钮下方创建一个隐藏的文件上传按钮；

接收用户通过触发对应的链接发送的文件上传操作步骤请求，请求在人机交互界面上点击大的按钮，弹出文件选择框，选择一个或多个文件之后，人机交互界面上会出现上传的一个或多个文件列表，同时大按钮会缩小，变成小按钮；

接收用户通过触发对应的链接发送的上传信息显示操作步骤请求，请求在人机交互界面上触碰小按钮后，显示上传状态的提示信息。

进一步，界面框架为vue框架。

进一步，在vue框架内创建一个子组件；在子组件的js部分，创建一个响应式变量showBig，并给响应式变量showBig设置默认值为true；在子组件的js部分，编写方法changeBig，将入参的值赋给showBig，并将编写方法changeBig暴露给调用编写方法changeBig的父组件。

进一步，在人机交互界面下创建图片类型的大按钮和小按钮包含如下子步骤：

在子组件的HTML部分中，创建图片类型的大按钮和小按钮；

给大按钮添加class=‘big’的样式，用于将大按钮的宽度、高度设置为400px，并且位置为页面布局的垂直居中；

给小按钮设置30px的默认宽度、高度，位置为页面布局的左上方；

在大按钮和小按钮外层各包裹一个div标签；

给大按钮和小按钮的单击事件绑定方法“triggerUpload”；

在子组件的js部分中，编写方法“triggerUpload”，实现触发隐藏的文件上传按钮的单击事件。