1

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

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

这是 document.ready 中的 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>  
            }

我不会发布控制器代码，因为它只是在文件上传为空的情况下进入。

知道出了什么问题吗？谢谢

非常重要的编辑

今天我决定回到我的 SVN 历史并尝试看看发生了什么。我发现了一件非常奇怪的事情。如果我想让它工作，我需要在视图本身（Create.cshtml）中包含 jquery。我一直认为在 _layout.cshtml 中包含 jquery .js 文件是足够的，但事实并非如此！所以只有这样做，它才能在 Chrome 中运行。

我在 Internet Explorer 中仍然有一个错误，它阻止图像显示，因为 iframe 的“加载”事件启动：“运行时错误 Microsoft JScript：访问被拒绝”。它在 Chrome 中完美运行。任何想法？？？

编辑 2

评论中要求在 jsfiddle 中添加代码。我不太确定它是如何工作的，所以我复制了渲染的 html，剪切了 javascript 并将其放入 javascript 窗口中。它现在什么也没做，我不知道为什么，但至少你可以看到整个画面。希望能帮助到你。（请注意，与问题中的代码相比，我做了一些修改，但问题是一样的）。这里！

4

1 回答 1

0

这里有很多问题：

  1. _layout 中的 js ref 就足够了，但是，您在加载 jQuery 之前引用了 $ inline。将所有脚本移到最后并换行，$(document).ready(function ({ }); 然后您可以删除重复的 js 引用
  2. var fileUploader您在同一块中声明了两次 - 危险，重命名其中一个
  3. 您从不声明 loadingImg，因此该行loadingImg = new Image();使用隐式声明的全局 - 如果它不存在则再次危险（如果没有完整的代码则无法判断）
  4. 一旦你修复了这些，你会发现你的表单永远不会回传到服务器，因为你正在处理提交客户端（在 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>
于 2012-12-08T22:41:00.233 回答