Question

我有这张图片上传表单，我检查了'更改'文件类型和文件大小。

如果文件超过特定大小或文件不是图像，则会提醒用户。我遇到的问题是，在这种情况下，如何阻止提交表单。如果我要点击文件提交的上传按钮。实际上它不应该直到文件是一定的大小和类型。

你能帮我设置好吗？我试过了，但我无法弄清楚在哪里和做什么。

<form enctype="multipart/form-data" method="">
        <input type="file" name="file" class="file"><br>
        <input type="submit" value="Upload File to Server">
    </form>

脚本（这是使用jquery表单插件完成的）

<script>
$(document).ready(function() {

$(':file').change(function(){
            var file = this.files[0];
            name = file.name;
            size = file.size;
            type = file.type;

            if(file.name.length < 1) {

            }
            else if(file.size > 1000000) {
                alert("File is to big");
            }
            else if(file.type != 'image/png' && file.type != 'image/jpg' && !file.type != 'image/gif' && file.type != 'image/jpeg' ) {
                alert("File doesnt match png, jpg or gif");
            }
            else { 

            $(':submit').click(function(){
                var bar = $('.bar');
                var percent = $('.percent');
                var status = $('#status');

                $('form').ajaxForm({
                    url:"upload_file.php",
                    type:"post",
                    dataType:"json",
                    target:"#status",

                    beforeSend: function() {
                        status.empty();
                        var percentVal = '0%';
                        bar.width(percentVal)
                        percent.html(percentVal);
                    },
                    uploadProgress: function(event, position, total, percentComplete) {
                        var percentVal = percentComplete + '%';
                        bar.width(percentVal)
                        percent.html(percentVal);
                    },
                    complete: function(xhr) {
                        status.html(xhr.responseText);
                        $("#status").html("HIIII Gais");

                    }
                });

                });
}
});             
    });       
</script>

Answer 1

您可以在两个函数之外设置一个变量，如果它有效则将其设置为true。如果它有效则发送请求，否则防止默认..

$(document).ready(function() {

    var isValid = false;

    $(':file').change(function() {

        isValid = false;

        var file = this.files[0];
        name = file.name;
        size = file.size;
        type = file.type;

        if (file.name.length < 1) {

        } else if (file.size > 1000000) {
            alert("File is to big");
        } else if (file.type != 'image/png' && file.type != 'image/jpg' && !file.type != 'image/gif' && file.type != 'image/jpeg') {
            alert("File doesnt match png, jpg or gif");
        } else {
            isValid = true;

        }
    });

    $(':submit').click(function(e) {
        if (!isValid) {
            e.preventDefault();
        }
        else {
            var bar = $('.bar');
            var percent = $('.percent');
            var status = $('#status');

            $('form').ajaxForm({
                url: "upload_file.php",
                type: "post",
                dataType: "json",
                target: "#status",

                beforeSend: function() {
                    status.empty();
                    var percentVal = '0%';
                    bar.width(percentVal)
                    percent.html(percentVal);
                },
                uploadProgress: function(event, position, total, percentComplete) {
                    var percentVal = percentComplete + '%';
                    bar.width(percentVal)
                    percent.html(percentVal);
                },
                complete: function(xhr) {
                    status.html(xhr.responseText);
                    $("#status").html("HIIII Gais");

                }
            });
        }

    });
});

Answer 2

使用javascript从文件输入元素获取的文件名不能超过。您需要在服务器端执行filesize，mime类型等检查。

jQuery如何在这种情况下阻止表单提交

2 个答案: