验证文件大小并输入多个输入答案

【问题标题】：Validate file size and type in a multiple input验证文件大小并输入多个输入
【发布时间】：2014-11-04 23:39:01
【问题描述】：

我有 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>

编辑的代码 新代码有效，但仍在保存过程中

$(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();
    });
});

【问题讨论】：

到目前为止你尝试过什么？
ID 在 HTML 中必须是唯一的，伙计们，它的唯一标识符
将其包装在一个表单元素中，然后在其上添加一个 onSubmit 函数
我试过了，但它是通过一次验证或事件 onchange 时的每个文件输入
@user3335420 您尝试过下面提供的解决方案吗？

标签： javascript jquery image validation input

【解决方案1】：

将提交按钮的类型更改为普通按钮并使用onclick 处理程序，将id 作为upload，

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

UPDATED FIDDLE

【讨论】：

感谢它的功能，我会再次改进
@user3335420 欢迎您！如果有帮助，您可以投票或接受答案！
但我以后还需要小帮助，可能是：D
哦，您可以添加到您的问题中。我们很乐意提供帮助！
我已经用你给我的新代码更新了代码（javascript），但是当它得到错误输入（文件太大）时，php 代码/保存过程仍然继续。我已经输入了“return false;”但它无法停止进程。