input file检验成功之后才可以点击

input file检验成功之后才可以点击

需求

在上传发票前需要先填写发票号,然后点击选择文件直接完成上传功能
在这里插入图片描述

实现思路

在没有输入发票号之前,file按钮不可用不能点击,输入之后,按钮可用,点击之后选择文件,选择文件之后直接完成上传

html代码

有一个文本框

<div id="uploadFrom" class="easyui-dialog" title="上传发票" data-options="iconCls:'icon-save',closed: true,modal: true," style="width:400px;height:200px;padding:10px"><div style="margin-bottom: 20px;">发票号码:<input type="text" id="spuId" name="spuId" class="easyui-textbox" data-options="require:true"/></div><div><input type="file" id="fileInput" accept="image/*,.pdf" onchange="uploadFile()" disabled/> <!-- 隐藏文件输入框 --></div></div>

js代码

/*** 页面加载立即执行查询*/
$(document).ready(function () {check();
});/*输入检查*/
function check(){let input = $('#spuId');let fileInput = $('#fileInput');input.textbox('textbox').bind('keyup', function(e){let val = input.textbox('textbox').val()if(val === ''){fileInput.attr("disabled","disabled")}else{fileInput.removeAttr("disabled")}});
}/*上传文件*/
function uploadFile() {let fileInput = document.getElementById('fileInput');let file = fileInput.files[0]; // 获取文件let spuId = $("#spuId").val();let businessId = $("#businessId").val();$.messager.progress();if (file) {let formData = new FormData();formData.append('file', file); // 将文件添加到 FormData 对象中formData.append('spuId',spuId)formData.append('businessId',businessId)formData.append('businessType','16')// 发送 AJAX 请求上传文件$.ajax({url: '${ctxBase}/common/file/upload',type: 'POST',data: formData,contentType: false,processData: false,success: function(response) {initFileTable()$.messager.alert('提示', '上传成功!', 'success');updateInvoiceNo(businessId);$.messager.progress('close');},error: function(jqXHR, textStatus, errorThrown) {$.messager.alert('提示', '上传失败!', 'error');$.messager.progress('close');}});} else {$.messager.alert('提示', '请上传文件!', 'info');$.messager.progress('close');}
}

这里使用的是easyui-textbox,如果使用input 可以使用以下方法监听

function check(){let input = $('#spuId');let fileInput = $('#fileInput');input .addEventListener('keyup', function() {let val = input.val()if(val === ''){fileInput.attr("disabled","disabled")}else{fileInput.removeAttr("disabled")}});
}

这样就只有我们输入正确的发票之后,选择文件才能点击
在这里插入图片描述
如果大家有更好的方法欢迎留言讨论

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/467148.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

每日OJ题_牛客_AB31活动安排_区间贪心_C++_Java

目录 牛客_AB31活动安排_区间贪心 题目解析 C代码 Java代码 牛客_AB31活动安排_区间贪心 活动安排_牛客题霸_牛客网 描述&#xff1a; 给定n个活动&#xff0c;每个活动安排的时间为[ai,bi)。求最多可以选择多少个活动&#xff0c;满足选择的活动时间两两之间没有重合。 …

购物车-多元素组合动画css

学习 渡一课程 多元素组合动画 练习。 在我们开发购物车功能时&#xff0c;经常会有点击添加按钮&#xff0c;就会有一个小圆点掉进购物车的动画&#xff0c;如下图所示&#xff0c;今天我们通过css来实现。 首先实现多元素组合动画 直接上代码&#xff0c;可以复制到本地使用…

深度学习:bert模型

multi-headed机制 1、通过不同的head得到多个特征表达&#xff0c;一般8个head 2、将所有特征拼接在一起 3、降维&#xff0c;将Z0~Z7连接一个FC全连接实现降维 多层堆叠 位置编码 如何实现位置编码&#xff1f; &#xff08;1&#xff09;为每个时间步添加一个0-1范围内的数…

Android Glide动态apply centerCropTransform(),transition withCrossFade动画,Kotlin

Android Glide动态apply centerCropTransform(),transition withCrossFade动画,Kotlin import android.graphics.Bitmap import android.os.Bundle import android.widget.ImageView import androidx.appcompat.app.AppCompatActivity import com.bumptech.glide.Glide import …

Vue 组件通信-自定义事件(七)

一、组件自定事件概念 自己定义的事件&#xff0c;包含事件名&#xff0c;事件回调等&#xff0c;定义好之后去给组件使用。也是一种组件的通信方式&#xff0c;适用于子组件传递给父组件。 二、 组件自定义事件实现子传父 1、在父组件中给子组件绑定一个自定义事件 在子组件标…

计算机的错误计算(一百四十八)

摘要 本节探讨 MATLAB 中 附近数的正割函数与 附近数的余割函数的计算精度问题。 例1. 已知 计算 直接贴图吧&#xff1a; 另外&#xff0c;16位的正确值分别为 0.4105556037464873e9、0.3670813182326778e13、-0.2549029285657875e8 与 -0.1248777628817462e12&am…

《XGBoost算法的原理推导》12-14决策树复杂度的正则化项 公式解析

本文是将文章《XGBoost算法的原理推导》中的公式单独拿出来做一个详细的解析&#xff0c;便于初学者更好的理解。 我们定义一颗树的复杂度 Ω Ω Ω&#xff0c;它由两部分组成&#xff1a; 叶子结点的数量&#xff1b;叶子结点权重向量的 L 2 L2 L2范数&#xff1b; 公式(…

算法练习:1004. 最大连续1的个数 III

题目链接&#xff1a;1004. 最大连续1的个数 III。 题目要求&#xff0c;给定一个数组&#xff0c;这个数组里面只有0或1&#xff0c;然后计算有多少个连续的1的最大长度&#xff0c;同时给了一个条件就是&#xff0c;可以把k个0变成1&#xff0c;然后来计算长度。 暴力解法&a…

CCS下载安装(以12.3.0版本为例)

Code Composer Studio 是一个集成开发环境 (IDE)&#xff0c;简称CCS软件。支持 TI 的微控制器和嵌入式处理器产品的开发。Code Composer Studio 包含一整套用于开发和调试嵌入式应用程序的工具。 CCS9.3.0及以上版本不需要License文件&#xff0c;但是CCS旧版本比如CCS5.5.0需…

串口接收,不定长数据接收

###1.CUBE-MX配置串口 2.我采用串口中断接收&#xff0c;打开中断接口 3.时钟同样8倍频&#xff0c;1分频&#xff0c;使用内部时钟 打开串口中断 main() { __HAL_UART_ENABLE_IT(&huart1, UART_IT_IDLE); // 启用空闲中断__HAL_UART_ENABLE_IT(&huart1, UART_IT_R…

密码学知识点整理二:常见的加密算法

常用的加密算法包括对称加密算法、非对称加密算法和散列算法。 对称加密算法 AES&#xff1a;高级加密标准&#xff0c;是目前使用最广泛的对称加密算法之一&#xff0c;支持多种密钥长度&#xff08;128位、192位、256位&#xff09;&#xff0c;安全性高&#xff0c;加密效率…

MongoDB Shell 基本命令(三)聚合管道

管道含义 类似Linux中的管道&#xff0c;前一个命令的输出作为后一个命令的输入。 显示网络连接、路由表和网络接口统计信息 netstat -ano -netstat:network statistics 网络统计 -a:显示所有连接和监听端口&#xff0c;包括所有活动的TCP和UDP连接。 -n:以数字形式显示地址…

OpenCV相机标定与3D重建(1)概述

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 本节中的函数使用所谓的针孔相机模型。通过使用透视变换将场景中的3D点 P w P_w Pw​ 投影到图像平面上&#xff0c;从而获得场景的视图&#x…

Docker部署Oracle 11g

1&#xff0c;拉取镜像&#xff1a; sudo docker pull registry.cn-hangzhou.aliyuncs.com/helowin/oracle_11gsudo docker images 2&#xff0c;启动一个临时容器&#xff0c;用于拷贝数据库文件&#xff0c;挂载到宿主主机&#xff0c;使数据持久化&#xff1a; sudo docke…

【Linux系统】—— 基本指令(二)

【Linux系统】—— 基本指令&#xff08;二&#xff09; 1 「alias」命令1.1 「ll」命令1.2 「alias」命令 2 「rmdir」指令与「rm」指令2.1 「rmdir」2.2 「rm」2.2.1 「rm」 删除普通文件2.2.2 「rm」 删除目录2.2.3 『 * 』 通配符 3 「man」 指令4 「cp」 指令4.1 拷贝普通…

从单层到 MVC,再到 DDD:架构演进的思考与实践

引言 在日常开发中&#xff0c;我们之前工作中经常接手的大多数都是传统 MVC 架构体系的项目。然而&#xff0c;随着现在分布式和微服务架构的普及&#xff0c;越来越多的项目开始重构、拆分&#xff0c;传统的 MVC 架构也逐渐向 DDD 架构演进。为什么需要将传统架构重构为 DD…

贝式计算的 AI4S 观察:使用机器学习对世界进行感知与推演,最大魅力在于横向扩展的有效性

「传统研究方法高度依赖于科研人员自身的特征和问题定义能力&#xff0c;通常采用小数据&#xff0c;在泛化能力和拓展能力上存疑。而 AI 研究方法则需要引入大规模、高质量数据&#xff0c;并采用机器学习进行特征抽取&#xff0c;这使得产生的科研结果在真实世界的问题中非常…

[产品管理-58]:安索夫矩阵矩阵帮助创业者确定研发出来的产品在市场中定位策略

目录 一、提出背景 二、核心思想与结构 三、应用背景与领域 四、实践案例 安索夫矩阵&#xff08;Ansoff Matrix&#xff09;&#xff0c;也被称为产品/市场方格或成长矢量矩阵&#xff0c;其应用背景可以从以下几个方面进行详细阐述&#xff1a; 一、提出背景 安索夫矩阵…

安当ASP系统:适合中小企业的轻量级Radius认证服务器

安当ASP&#xff08;Authentication Service Platform&#xff09;身份认证系统是一款功能强大的身份认证服务平台&#xff0c;特别适用于中小企业。其中&#xff0c;简约型Radius认证服务器是安当ASP系统中的一个重要组成部分。以下是对该系统的详细介绍&#xff1a; 一、主要…

uniapp配置h5路由模式为history时404

为了不让URL中出现#&#xff0c;让uniapp项目配置h5路由模式为hisory 然而本地好好的&#xff0c;放到服务器上却404了。 解决方法是给nginx配置一个伪静态&#xff1a; location /xxx-html/ {alias /home/nginx_web/xxx_new_html/;try_files $uri $uri/ /xxx-html/index.ht…