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")}});
}
这样就只有我们输入正确的发票之后,选择文件才能点击
如果大家有更好的方法欢迎留言讨论