驗證文件大小並輸入多個輸入

Question

我有3個輸入文件，我想在一個提交按鈕表單事件onSubmit =“”中對3個輸入文件進行JavaScript驗證

<form action="step2_crud_dev.php" method="post" enctype="multipart/form-data" class="form-horizontal" role="form" id="dataPribadi"  >
    <div>
    <input type="file" name="fUpload1" id="fileUpload1"/>
    <input type="file" name="fUpload2" id="fileUpload2"/>
    <input type="file" name="fUpload3" id="fileUpload3"/>
    </div>
    <div>
    <input type="submit" name="upload" value="upload" />
    </div>
</form>

EDITED CODE新代碼可以正常工作，但仍可以保存

$(document).ready(function(){
    $('#tbl_next').click(function(){
        //alert('hello');
        $('input[type="file"]').each(function(){
            var thisFile = $(this);
            var fileSize = thisFile[0].files[0].size;
            var fileType = thisFile[0].files[0].type;
            //alert(fileSize);

            if(fileSize>1048576){ //do something if file size more than 1 mb (1048576)
                alert(fileSize +" bites\n ukuran gambar terlalu besar");
                return false;
            }else{
                switch(fileType){
                    case 'image/png':
                    case 'image/gif':
                    case 'image/jpeg':
                    case 'image/pjpeg':
                        alert("Acceptable image file!");
                        break;
                    default:
                        alert('Unsupported File!');
                        return false;
                }
            }
        });
        $('form#dataPribadi').submit();
    });
});

Answer 1

將提交按鈕的類型更改為普通按鈕，並通過提供id作為upload為其使用onclick處理程序，

<form action="step2_crud_dev.php" method="post" enctype="multipart/form-data" class="form-horizontal" role="form" id="dataPribadi"  >
    <div>
        <input type="file" name="fUpload1" id="fileUpload1"/>
        <input type="file" name="fUpload2" id="fileUpload2"/>
        <input type="file" name="fUpload3" id="fileUpload3"/>
    </div>
    <div>
        <input type="button" id="upload" value="upload" />
    </div>
</form>

您的點擊事件處理程序應該是

$(document).ready(function(){
    $('#upload').click(function(){
        alert('hello');
        $('input[type="file"]').each(function(){
            var thisFile = $(this);
            var fileSize = thisFile[0].files[0].size;
            alert(fileSize);
        });
        $('form#dataPribadi').submit();
    });
});

更新場