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

2 つの関数の外側に変数を設定し、有効な場合は true に設定できます。有効な場合は request を送信し、そうでない場合はデフォルトを防止します。

$(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 に答える