Question

我在单个页面上有多个文件上传小部件，我在这里所做的是，我有一个输入字段，一个隐藏的文件输入字段，1个按钮来选择文件和1个按钮来预览文件。当我们使用“文件选择”按钮选择文件时，文件将使用ajax上传，文件名将插入第一个输入字段，并为预览按钮生成一个链接。

我想要的是，如果尚未选择并上传文件，则不应提交该表单，或者如果我们在未选择文件的情况下提交该表单，则应显示未上传文件的警报。首先上传文件。

我已经在堆栈中搜索了其他一些问题，但无法解决。

    <form id="fimilyVisaForm" action="https://www.somesite.com/india/chk-payment-done/<?php echo $appid;?>" method="post" enctype="multipart/form-data">

<!--upload widget no 1-->   

                        <div class="form-control">
                            <div class="col-sm-4 label">Colored Scanned copy of the Passport</div>
                            <div class="col-sm-3">
                                <input type="text" class="form-control-input" placeholder="Colored Scanned copy of the Passport" name="passport_copy_upload" id="passport_copy_upload" onclick="removeError(this.id);" value="" readonly required />
                            </div>
                            <div class="col-sm-3">
                                <input type="button" class="submit-btn read-more" value="Select File" id="passport">
                                <input type="file" name="passportimg" id="passportimg" style="display:none">
                                <a id="passportlink" class="submit-btn read-more" href="javascript:void(0)" target="_blank">VIEW UPLOADED FILE</a>
                            </div>
                            <div class="col-sm-12" id="passportmsg" style="color: green; margin-bottom: 20px; font-weight: 600;"> </div>
                        </div>
<!--upload widget1 end-->

<!-- Upload widget 2 Starts -->                        
                        <div class="form-control">
                            <div class="col-sm-4 label">Coloured Scanned copy of your front facing photograph with white background</div>
                            <div class="col-sm-3">
                                <input type="text" class="form-control-input" placeholder="Colored Passport-type photograph" name="photoid" id="photoid" onclick="removeError(this.id);" value="" readonly required />
                            </div>
                            <div class="col-sm-3">
                                <input type="button" class="submit-btn read-more" value="Select File" id="photographbtn">
                                <input type="file" name="photograph" id="photograph" style="display:none">
                                <a id="photoview" class="submit-btn read-more" href="javascript:void(0)" target="_blank">VIEW UPLOADED FILE</a>
                            </div>
                            <div class="col-sm-12" id="photomsg" style="color: green; margin-bottom: 20px; font-weight: 600;"> </div>
                        </div>

<!-- upload widget2 Finish-->

<input id="next" class="btn custom-btn" name="submit" type="submit" value="Submit">
</form>

这是我的ajax文件上传部分

<script>
    $("#passportimg").change(function() {
        var form = $("#fimilyVisaForm")[0];
        var form_data = new FormData(form);
        $('.overlay').show();
        $.ajax({
            url: '<?= base_url();?>visa/upload/do_upload/<?php echo $appid;?>',
            dataType: 'json',
            cache: false,
            contentType: false,
            processData: false,
            data: form_data,
            type: 'post',
            success: function(response) {
                var pptimg = response.pptimg;
                var passporturl = "<?=base_url();?>upload/" + pptimg;
                document.getElementById("passport_copy_upload").value = response.pptimg;
                document.getElementById('passportlink').href = passporturl;
                $("#passportmsg").html("Your Passport has been Successfully Uploaded. Proceed to Upload other Documents");
                $('.overlay').hide();
            }
        });
    });




    $("#photograph").change(function() {
        var form = $("#fimilyVisaForm")[0];
        var form_data = new FormData(form);
        $('.overlay').show();
        $.ajax({
            url: '<?= base_url();?>visa/upload/do_upload_photo/<?php echo $appid;?>',
            dataType: 'json',
            cache: false,
            contentType: false,
            processData: false,
            data: form_data,
            type: 'post',
            success: function(response) {
                var photoidimg = response.photoidimg;
                var photographurl = "<?=base_url();?>upload/" + photoidimg;
                document.getElementById("photoid").value = response.photoidimg;
                document.getElementById('photoview').href = photographurl;
                $("#photomsg").html("Your Photograph has been Successfully Uploaded. Proceed to Upload other Documents");
                $('.overlay').hide();
            }
        });
    });
</script>

Answer 1

将此类添加到文件输入中，例如：

\bCHECKOUT.*(?:AM|PM)(?=.*?DRY GOODS|$)

尝试一下：

<input type="file" name="passportimg" id="passportimg" style="display:none" class="fileInput">

在您的$("#fimilyVisaForm").submit(function(e) { $(".fileInput").each(function() { if($(this).is(":visible")) { if($(this).val() == "") { e.preventDefault(); $(this).css("border-color", "red"); alert("Please make sure to select the file."); //$(this).prepend("<div class=\"alert alert-danger\" role=\"alert\">Please make sure to select a file.</div>"); $(this).focus(); return false; } } }); return true; });部分

提交表单前需要文件输入警报

1 个答案: