公司用的管理系统_外网专线_网页开发公司_网站推广一般多少钱

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")}});
}

这样就只有我们输入正确的发票之后，选择文件才能点击

如果大家有更好的方法欢迎留言讨论