2

jquery file upload plugging を使用してロゴ画像をアップロードしています。ファイル入力は、MVC Razor ビュー フォーム内にあります。アップロードの現在の動作は、画像が選択されるとすぐにサーバーに投稿され、base64 文字列に変換され、json を介して文字列として返され、隠しフィールドと img タグに順番に格納されます。アップロードした画像を表示します。後で、画像は残りのフォーム フィールドと共に保存されます。

この実装は IE10、IE9、Firefox、Chrome、Opera で完璧に動作しますが、IE8 でファイルを選択すると、すべてのフォーム フィールドの控えめな検証がサーバーに画像を送信する前に実行されます。この動作により、ユーザーは画像を選択する前にすべてのフォーム フィールドに入力する必要があります。

以下はコードです：

MVC ビュー

<form method="post" enctype="multipart/form-data" action="@( "/MenuTemplate/Index/" & Model.ClientLocationId)" novalidate="novalidate" autocomplete="off">

    <div class="logo">
            <label>Logo:</label><img id="imgLogo" src='@IIF(Model.Logo IsNot Nothing, "data:image/png;charset=utf-8;base64," & Model.Logo, String.Empty)' onerror='this.style.display = "none"'  />
            <input id="LogoFile" type="file" name="files" accept="image/jpeg,image/JPEG,image/jpg,image/JPG,image/png,image/PNG"/>
            @Html.ValidationMessage("file")
            <a id="btnRemoveLogo" href="#" class="icon" title="REMOVE LOGO"><i class="icon-remove"></i></a>
        </div>
        <div class="name">
            @Html.LabelFor(Function(m) m.TemplateName)
            @Html.TextBoxFor(Function(m) m.TemplateName, New Dictionary(Of String, Object)() From {{"id", "txtTemplateName"}, {"class", "trackChanges"}, {"style", "width:210px"}})
            @Html.ValidationMessageFor(Function(m) m.TemplateName)
        </div>
        <div class="color">
            @Html.LabelFor(Function(m) m.Color)
            @Html.TextBoxFor(Function(m) m.Color,  New Dictionary (Of String , Object )() From  { { "class", "colorpickerinput trackChanges" }, { "tabindex", "-1" }, { "tabstop", "false" } })
            @Html.ValidationMessageFor(Function(m) m.Color)
        </div>
        <div class="type">
            @Html.LabelFor(Function(m) m.MenuTypeId)
            @Html.DropDownListFor(Function(x) x.MenuTypeId, Enumerable.Empty(Of SelectListItem)(), New Dictionary(Of String, Object)() From {{"class", "ddlMenuTypeId trackChanges"}, {"style", "width:210px"}})
            @Html.ValidationMessageFor(Function(m) m.MenuTypeId)
        </div>
         <div class="type">
            @Html.LabelFor(Function(m) m.DisclosureId)
            @Html.DropDownListFor(Function(m) m.DisclosureId, Enumerable.Empty(Of SelectListItem)(), New Dictionary(Of String, Object)() From {{"class", "ddlDisclosureId trackChanges"}, {"style", "width:210px"}})
            @Html.ValidationMessageFor(Function(m) m.DisclosureId)
        </div>
        <div class="description">
            @Html.LabelFor(Function(m) m.Description)
            @Html.TextAreaFor(Function(m) m.Description, New Dictionary(Of String, Object)() From {{"class", "trackChanges"}})
            @Html.ValidationMessageFor(Function(m) m.Description)
        </div>

</form>

JS コード

 //Upload Image
$('#LogoFile').fileupload({
    forceIframeTransport: true,
    dataType: 'json',
    url: '/postLogoImage?Id=' + Id,
    done: function (e, data) {

        try {
            var errorflag = false;
            $.each(data.files, function (index, item) {                    
                var fname = item.name;
                var ext = fname.split('.').pop().toLowerCase();

                if ($.inArray(ext, ['png', 'jpg', 'jpeg']) == -1) {
                    dialogNotification('Invalid image type. Please use .jpg, .png only.!');
                    errorflag = true;
                    return;
                }
            });
            if (errorflag === true)
                return;
            if (!data.result.error) {
                var returnedImageString = data.result.files[0];

                $('#imgLogo').attr('src', "data:image/jpg;charset=utf-8;base64," + returnedImageString);
                $('#imgLogo').show();
                $('#hLogo').val(returnedImageString);
                $('#btnRemoveLogo').show();
                SetRecordChangeFlag(true);
            }
            else {
                var errs = data.result;
                dialogNotification(errs.message);
            }
        } catch (e) {
            alert(e.message);
        }
    },
    error: function (jqXHR, status, error) {
        dialogNotification('Invalid image type. Please use .jpg, .png only.');
    }
});

事前に助けてくれてありがとう！

4

1 に答える 1

0

これで問題が解決するはずです：

$(function() {  
 var validationSettings = $.data($('form').get(0), 'validator').settings;  
 validationSettings.ignore = '.ignore, #LogoFile, :hidden, :disabled';
});
于 2015-10-27T16:27:08.433 に答える