0

我有这张图片上传表格，我在“更改”上检查文件类型和文件大小。

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

你能帮我设置一下吗？我试过了，但我就是不知道在哪里做什么。

<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>
4

2 回答 2

2

您可以在两个函数之外设置一个变量，如果它有效，则将其设置为 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");

                }
            });
        }

    });
});​
于 2012-10-09T15:03:20.713 回答
0

您不能从使用 javascript 的文件输入元素中获得更多的文件名。您需要在服务器端进行文件大小、mime 类型等检查。

于 2012-10-09T14:58:48.323 回答