使用Javascript提交表单并使用ajaxForm处理它

Question

我正在更改我的系统，以便在我现在提交表单时有一个加载进度条。

在我的旧系统中，我有这个表单和这个脚本来检查文件是否存在并且格式正确：

<form  method="POST" enctype="multipart/form-data" id="myForm" action="upload.php">

    <input type="file" name="imageSent" id="imgFile" class="inputImg" />
    <label for="imgFile" class="labelForImgF">
        <span>Select Img</span>
    </label>

    <button type="button" class="btnSubmit" onclick='verifyImg();'>
        <span>Send</span>
    </button>

</form>

    <script>
function verifyImg() {
    document.getElementById("warning").innerhtml = "";
    var fileName = document.getElementById("imgFile");
    if(fileName.files.item(0) == null) {
        document.getElementById("warning").innerHTML = "You must select an img";
    } else {
        if(!isValidFileType(fileName.files.item(0).name,'image')) {
            document.getElementById("warning").innerHTML = "Bad format";
        } else {
            document.getElementById('myForm').submit();
            document.getElementById("warning").innerHTML = "Sucess";
        }
    }
}

var extensionLists = {}; 
extensionLists.image = ['jpg', 'nef', 'bmp', 'png', 'jpeg', 'svg', 'webp', '3fr', 'arw', 'crw', 'cr2', 'cr3', 'dng', 'kdc', 'mrw', 'nrw', 'orf', 'ptx', 'pef', 'raf', 'R3D', 'rw2', 'srw', 'x3f'];

function isValidFileType(fName, fType) {
return extensionLists[fType].indexOf(fName.toLowerCase().split('.').pop()) > -1;
}
</script>

这是我的新系统，它适用于ajax但我无法检查格式是否正确，因为只要我将onclick:verifyImg();放在我的按钮中，表单提交而不通过Ajax系统。

这是我的新代码：

<form  method="POST" enctype="multipart/form-data" id="myForm" action="upload.php">

    <input type="file" name="imageSent" id="imgFile" class="inputImg" />
    <label for="imgFile" class="labelForImgF">
        <span>Select Img</span>
    </label>

    <button class="btnSubmit">
        <span>Send</span>
    </button>

</form>
<div id="bararea">
    <div id="bar"></div>
</div>

<div id="percent"></div>
<div id="status"></div>
<script>
$(function() {
$(document).ready(function(){
    var bar = $('#bar')
    var percent = $('#percent');
    var status = $('#status');

    $('form').ajaxForm({
        beforeSend: function() {
            status.empty();
            var percentVal = '0%';
            bar.width(percentVal);
            percent.html(percentVal);
        },
        uploadProgress: function(event, position, total, percentComplete) {
            var percentVal = percentComplete + '%';
            percent.html(percentVal);
            bar.width(percentVal);
        },
        complete: function(xhr) {
            status.html(xhr.responseText);
        }
    });
});
});
</script>

这两个系统分别运行良好，但我不能混用它们，以便用javascript验证我的表单并用Ajax提交它。

我想我不太了解Ajax是如何工作的，你能帮助我吗？

我是初学者请放纵。

解决方案：我尝试了Chris G的回答并在发送之前更改了函数，然后现在它完美地工作了。

码：

<form  method="POST" enctype="multipart/form-data" id="myForm" action="upload.php">

    <input type="file" name="imageSent" id="imgFile" class="inputImg" />
    <label for="imgFile" class="labelForImgF">
        <span>Select Img</span>
    </label>

    <button class="btnSubmit">
        <span>Send</span>
    </button>

</form>
<div id="bararea">
    <div id="bar"></div>
</div>

<div id="percent"></div>
<div id="status"></div>
    <script>
function verifyImg() {
    document.getElementById("warning").innerHTML = "";
    var fileName = document.getElementById("imgFile");
    if(fileName.files.item(0) == null) {
        document.getElementById("warning").innerHTML = "You must select an img";
        return false;
    } else {
        if(!isValidFileType(fileName.files.item(0).name,'image')) {
            document.getElementById("warning").innerHTML = "Bad format";
            return false;
        } else {
            return true;
            document.getElementById("warning").innerHTML = "Sucess";
        }
    }
}

var extensionLists = {}; 
extensionLists.image = ['jpg', 'nef', 'bmp', 'png', 'jpeg', 'svg', 'webp', '3fr', 'arw', 'crw', 'cr2', 'cr3', 'dng', 'kdc', 'mrw', 'nrw', 'orf', 'ptx', 'pef', 'raf', 'R3D', 'rw2', 'srw', 'x3f'];

function isValidFileType(fName, fType) {
return extensionLists[fType].indexOf(fName.toLowerCase().split('.').pop()) > -1;
}
</script>
<script>
$(document).ready(function(){
    var bar = $('#bar')
    var percent = $('#percent');
    var status = $('#status');

    $('form').ajaxForm({
        beforeSubmit: function() {
            if (!verifyImg()) return false ;
            status.empty();
            var percentVal = '0%';
            bar.width(percentVal);
            percent.html(percentVal);
        },
        uploadProgress: function(event, position, total, percentComplete) {
            var percentVal = percentComplete + '%';
            percent.html(percentVal);
            bar.width(percentVal);
        },
        complete: function(xhr) {
            status.html(xhr.responseText);
        }
    });
});
</script>