jQuery on submit preventDefault() 不起作用答案

【问题标题】：jQuery on submit preventDefault() does not worksjQuery on submit preventDefault() 不起作用
【发布时间】：2012-05-20 01:11:07
【问题描述】：

我有带有提交按钮和 input='file' 控件的 html 表单：

<form action="/Profile/UploadFile" enctype="multipart/form-data" method="post" onsubmit="OnUploadSubmit(this)">

OnUploadSubmit 函数如下所示：

  if (e.files[0].size > 5000000) {
        $('#upload_error').css('display', 'block');
        $('#upload_error').text('The file size is too large for upload')
        e.preventDefault();
        return false;
    }

    var files = e.files;
    var ext = $('#file_uploader').val().split('.').pop().toLowerCase();
    if ($.inArray(ext, ['jpeg', 'jpg', 'png']) == -1) {
        $('#upload_error').css('display', 'block');
        $('#upload_error').text('Only, jpg, jpeg, png is allowed');
        e.preventDefault();
        return false;
    }
    return true;
}

e.preventDefault() 并返回 false；无论如何提交都不起作用。

有人知道我的问题吗？

谢谢

【问题讨论】：

e 应该是一个事件对象，您可以将其作为处理程序的第一个参数。
我认为你需要 onsubmit="return OnUploadSubmit(this)"

标签： jquery asp.net-mvc-3 forms onsubmit

【解决方案1】：

首先你不能以这种方式使用 preventDefault 因为你没有将事件对象传递给函数，然后：

onsubmit="return OnUploadSubmit(this)"

我推荐：

添加 id 属性并移除 onsubmit：

<form id="upload" action="/Profile/UploadFile" enctype="multipart/form-data" method="post">

jQuery:

$(function(){ // Document Ready

        $('#upload').submit(function(e){

        e.preventDefault();
         if (e.files[0].size > 5000000) {
                $('#upload_error').css('display', 'block');
                $('#upload_error').text('The file size is too large for upload')
            }

            var files = e.files;
            var ext = $('#file_uploader').val().split('.').pop().toLowerCase();
            if ($.inArray(ext, ['jpeg', 'jpg', 'png']) == -1) {
                $('#upload_error').css('display', 'block');
                $('#upload_error').text('Only, jpg, jpeg, png is allowed');
            }
        }

    });

});

【讨论】：

【解决方案2】：

您的 OnUploadSubmit 方法定义是否包含 e 作为参数？如果没有，e.preventDefault 将不起作用。

【讨论】：

【解决方案3】：

您是否尝试过onsubmit="return OnUploadSubmit(this);" 而不是onsubmit="OnUploadSubmit(this)"？

【讨论】：

【解决方案4】：

我觉得你需要onsubmit="return OnUploadSubmit(this)"

【讨论】：