1

JQueryの使用で非常に奇妙な問題が発生しました。ユーザーが「ファイルを保存」または「画像なし」の2つのボタンをクリックできるファイルアップロードフォームがあります。2つは、fileuploadフィールドに画像があるかどうかを管理する同じコントローラーを呼び出しています。

奇妙なことに、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のjsrefで十分ですが、jQueryがロードされる前に$inlineを参照しています。すべてのスクリプトを最後に移動してラップイン$(document).ready(function ({ }); すると、重複するjs参照を削除できます
  2. 同じブロックで2回宣言var fileUploaderします-危険です。そのうちの1つを名前変更してください
  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 に答える