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

需求

在上传发票前需要先填写发票号，然后点击选择文件直接完成上传功能

实现思路

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

html代码

有一个文本框

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代码

javascript 复制代码

/**
 * 页面加载立即执行查询
 */
$(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 可以使用以下方法监听

javascript 复制代码

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

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

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