C# 使用JQuery和MVC3在某些情况下提交事件未完成

我在使用JQuery时遇到了一个非常奇怪的问题。我有一个文件上传表单，用户可以点击两个按钮：“保存文件”或“无图片”。两者调用同一个控制器来管理fileupload字段中是否有图片

奇怪的是，控制器get只在fileupload字段为空的情况下调用。如果有人选择了一张图片，它就不会进入控制器，这让我觉得提交不起作用。但是我的jquery代码get被调用，并且总是返回true

以下是文档中的JQuery代码。就绪：

$('#ImgForm').on('submit', function () {

        var fileUploader = document.getElementById("fileuploader");
        $(fileUploader).hide();

        var fileUploader = document.getElementById("informations");
        $(fileUploader).show();

        //Create a new image and insert it into the Images div.  Just to be fancy, 
        //we're going to use a "FadeIn" effect from jQuery
        var imgDiv = document.getElementById("Images");
        loadingImg = new Image();
        loadingImg.src = "../../Pictures/ajax-loader.gif";

        //Hide the image before adding to the DOM
        $(loadingImg).hide();
        imgDiv.appendChild(loadingImg);
        //Now fade the image in
        $(loadingImg).fadeIn(500, null);

        return true;
    });

以下是MVC视图代码：

@using (Html.BeginForm("UploadImage", "Recipe", FormMethod.Post,
                new
                {
                    enctype = "multipart/form-data",
                    id = "ImgForm",
                    name = "ImgForm",
                    target = "UploadTarget"
                }))
            {
                <div id="fileuploader">
                    <h4>Étape 1: Choisir une photo</h4>
                    <input id="lefile" type="file" style="display:none" name="imageFile" accept="image/x-png, image/jpeg" />
                    <div class="input-append">
                       <input id="photoCover" class="input-large" type="text" />
                       <a class="btn" onclick="$('input[id=lefile]').click();">Parcourir...</a>
                    </div>

                    <script type="text/javascript">
                        $('input[id=lefile]').change(function () {
                            $('#photoCover').val($(this).val());
                        }); 
                    </script>

                    <input id="SaveImage" type="submit" class="btn btn-success" value="Sauvegarder l'image" />
                    <input id="SaveNoImage" type="submit" class="btn btn-danger" value="Aucune photo" />
                </div>  
            }

@使用（Html.BeginForm（“UploadImage”、“Recipe”、FormMethod.Post、，
新的
{
enctype=“多部分/表单数据”，
id=“ImgForm”，
name=“ImgForm”，
target=“UploadTarget”
}))
{
É磁带1：Choisir une照片
这里有很多问题：

_layout中的js ref已经足够了，但是，在加载jQuery之前，您正在引用$inline。请将所有脚本移到末尾，并换行到
$（document）.ready（函数（{}）；
，然后可以删除重复的js引用
您在同一块中声明了两次
var fileUploader
，如果重命名其中一个，则会很危险
您从不声明loadingImg，因此行
loadingImg=new Image（）；
正在使用隐式声明的全局-如果它不存在，则再次是危险的（没有完整的代码就无法判断）
一旦修复了这些问题，您将看到表单永远不会回发到服务器，因为您正在处理提交客户端（在jQuery中）
解决了这些问题后，我在Chrome、FF、IE9和IE10中获得了相同的行为。以下是我使用的视图：

@{
    ViewBag.Title = "Test";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Test</h2>

@using (Html.BeginForm("Test", "Home", FormMethod.Post,
                new
                {
                    enctype = "multipart/form-data",
                    id = "ImgForm",
                    name = "ImgForm",
                    target = "UploadTarget"
                }))
            {
                <div id="fileuploader">
                    <h4>Étape 1: Choisir une photo</h4>
                    <input id="lefile" type="file" style="display:none" name="imageFile" accept="image/x-png, image/jpeg" />
                    <div class="input-append">
                       <input id="photoCover" class="input-large" type="text" />
                       <a class="btn" onclick="$('input[id=lefile]').click();">Parcourir...</a>
                    </div>
                    <input id="SaveImage" type="submit" class="btn btn-success" value="Sauvegarder l'image" />
                    <input id="SaveNoImage" type="submit" class="btn btn-danger" value="Aucune photo" />
                </div>  
            }

<div id ="UploadTarget">upload target</div>
<div id="Images"></div>

    <script type="text/javascript">
        $(document).ready(function () {
            $('input[id=lefile]').change(function () {
                debugger;
                $('#photoCover').val($(this).val());
            });

            $('#ImgForm').on('submit', function () {
                alert('in js submit');
                var fileUploader = document.getElementById("fileuploader");
                $(fileUploader).hide();

                var fileUploader1 = document.getElementById("informations");
                $(fileUploader1).show();

                //Create a new image and insert it into the Images div.  Just to be fancy, 
                //we're going to use a "FadeIn" effect from jQuery
                var imgDiv = document.getElementById("Images");
                var loadingImg = new Image();
                loadingImg.src = "/content/335.gif";

                //Hide the image before adding to the DOM
                $(loadingImg).hide();
                imgDiv.appendChild(loadingImg);
                //Now fade the image in
                $(loadingImg).fadeIn(500, null);
                debugger;
                return true;
            });
        });
    </script>

@{
ViewBag.Title=“测试”；
Layout=“~/Views/Shared/_Layout.cshtml”；
}
试验
@使用（Html.BeginForm（“Test”、“Home”、FormMethod.Post、，
新的
{
enctype=“多部分/表单数据”，
id=“ImgForm”，
name=“ImgForm”，
target=“UploadTarget”
}))
{
É磁带1：Choisir une照片
帕库里尔。。。
}
上载目标
$（文档）.ready（函数（）{
$（'input[id=lefile]'）。更改（函数（）{
调试器；
$（'#photoCover'）.val（$（this.val（））；
});
$（'#ImgForm'）。在（'submit'，函数（）{
警报（“在js提交中”）；
var fileUploader=document.getElementById（“fileUploader”）；
$（fileUploader.hide（）；
var fileUploader1=document.getElementById（“信息”）；
$（fileUploader1.show（）；
//创建一个新的图像并将其插入到Images div中。只是为了好玩，
//我们将使用jQuery的“FadeIn”效果
var imgDiv=document.getElementById（“图像”）；
var loadingImg=新图像（）；
loadingImg.src=“/content/335.gif”；
//在添加到DOM之前隐藏图像
$（加载img.hide（）；
imgDiv.appendChild（加载img）；
//现在淡入图像
$（加载img）.fadeIn（500，空）；
调试器；
返回true；
});
});
您是否尝试过“手动”发送数据使用经典的ajax调用？您是否也检查了提交文件后没有得到404。这意味着您的操作没有正确签名？没有。我没有尝试。我使用了这种方法，一开始效果很好。在我随后的原始文章中，它没有使用submit事件，而是调用了一个函数，该函数在最后执行了.submit。不幸的是，IE9不支持这一点。因此，解决方法是使用事件，但当出现图像时，会有奇怪的情况阻止提交完成…尝试返回false而不是true？您是否随时使用Jquery刷新页面的某些部分？我在使用“on”绑定事件时遇到很多问题，因为一旦html的任何部分被刷新，事件绑定就会丢失。I并最终使用“.live”（“单击”，函数（））相反，样式事件绑定不会出现此问题。不起作用。它也会做同样的事情。它会进入提交函数本身，完成所有工作，但它从未真正提交表单，因为jquery就绪代码从未被调用过。您好！感谢您花时间回答。您的回答很有意义，但它让我意识到了这一点我两天前发现的方法：这段代码不好，它是从一个关于文件上传的教程中粘贴的部分副本，正如你所说，它包含了很多问题。所以两天前，我决定采用一种新的方法，找到这个项目：它工作起来很有魅力。我会为你的工作提供奖励！再次感谢。