asp.net - 如果文件已存在，jQuery 拦截并阻止表单提交

Question

我使用 MVC3，并且有一个带有文件上传的表单。如果该文件已存在于服务器上，我想提示用户确认他们想要覆盖该文件。我在表单提交上添加了一个 jQuery 方法来处理我在线阅读的内容，但似乎帖子在显示确认对话框之前已被初始化。

如果我在表单提交函数顶部调用 e.preventDefault() ，它会停止表单，但我不知道如何重新调用该操作。这是我所拥有的:

表格

@using (Html.BeginForm("Upload", "Management", FormMethod.Post, new {id = "formUpload", enctype = "multipart/form-data"})) {

    <div class="editor-label">Pricing Model Workbook</div>
    <div class="editor-field">
        <input type="file" name="file" id="file" size="50" />
        @Html.ValidationMessageFor(file => file.FileName)
    </div>
    <div><input type="submit" name="upload" id="upload" value="Upload" /></div>
}

jQuery

<script type="text/javascript" language="javascript">
    $(document).ready(function () {
        $('#formUpload').submit(function (e) {
            var filePath = $('#file').val();
            $.getJSON('@Url.Action("CheckIfFileExists")', { path: filePath },
                function (exists) {
                    if (exists) {
                        var cancel = confirm('File "' + filePath + '" has already been uploaded. Overwrite?');
                        if (cancel) {
                            e.preventDefault();
                            return false;
                        }
                    }

                    return true;
                }
            );
        });
    });
</script>

所以我的问题是，我做错了什么？另外，作为奖励，如果客户端验证捕获错误，是否有任何方法可以防止弹出此错误？

任何帮助将不胜感激!

更新我最终做到了这一点，这对我想做的事情很有用。

    <script type="text/javascript" language="javascript">
    $(document).ready(function () {
        var fileInvalid = false;

        // check if file exists when user selects a new file
        $('#file').change(function () {
            var filePath = $('#file').val();
            $.getJSON('@Url.Action("CheckIfFileExists")', { path: filePath },
                function (exists) {
                    if (exists) {
                        var overwrite = confirm('Warning :: File "' + filePath + '" has already been uploaded.'
                                                + 'The existing data will be overwritten on submission. Continue?');
                        if (!overwrite) {
                            $('#file').replaceWith($('#file').clone(true));
                        }
                    }
                }
            );
        });
    });
</script>

Answer 1

问题是您的 Ajax 请求只有在提交处理程序完成后才可能完成；因此，该帖子将继续，您将无法取消它。听起来你需要的是一扇门；基本上，除非您将标志设置为允许，否则您无法提交。像这样:

 var fileInvalid = true;
 $('#file').change(function()
 {
     $.getJSON('@Url.Action("CheckIfFileExists")', { path: filePath },
            function (exists) {
                if (exists) {
                    var cancel = confirm('File "' + filePath + '" has already been uploaded. Overwrite?');
                    if (cancel) {
                        fileInvalid = false;
                    }
                }
                else
                {
                    fileInvalid = false;
                }
            }
        );
 });

 $('#formUpload').submit(function(e)
 {
     if(fileInvalid)
        e.preventDefault();
 });