3

我创建了以下允许上传图片的表单，它有一个在 IE 上无法正常工作的提交按钮（它只在第二次点击后提交）：

    <fieldset id="form-fieldset" data-listurl="@Url.Action("Index", "Partners", new { Area = "Panel" })">
<legend></legend>


<div class="editor-label">
    @Html.LabelFor(model => model.Name)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.Name)
    @Html.ValidationMessageFor(model => model.Name)
</div>

<div class="editor-label">
    @Html.LabelFor(model => model.Logo)
</div>
<div class="editor-field">
    @if (ViewData["Logo"] != null && !String.IsNullOrWhiteSpace(ViewData["Logo"].ToString()) && File.Exists(Server.MapPath("~/Content/uploads/" + ViewData["Logo"])))
    {
        <img src="@Url.Content("~/Content/uploads/" + ViewData["Logo"])" style="max-height: 150px" />
    }
    <div id="file-upload">
        <span class="input-xlarge uneditable-input">@(ViewData["Logo"] == null || String.IsNullOrWhiteSpace(ViewData["Logo"].ToString()) ? "No files selected" : ViewData["Logo"].ToString()) </span><input type="button" class="btn btn-primary select-button" value="Selecionar" /><input type="button" class="btn remove-button" value="Remover" />
        <input type="file" name="image" id="image" style="visibility: hidden" />
    </div>@Html.HiddenFor(model => model.Logo)
</div>

<div class="form-actions">
    <input type="submit" class="btn btn-primary" value="Salvar" />
    <input type="button" class="btn" id="btnCancel" value="Cancelar" />
</div>

上面的表单有一个打开文件对话框的按钮，而不是显示正常的输入文件控件。

我使用以下脚本打开文件对话框并将跨度标记内容设置为文件名。

    <script type="text/javascript">
    $(document).ready(function () {
        $('#btnCancel').click(function () {
            location.href = $('#form-fieldset').data('listurl');
        });


        $('#file-upload .select-button').click(function () {
            $('#file-upload input[type=file]').click();
        });

        $('#file-upload input[type=file]').change(function () {
            var entireValue = $("#file-upload input[type=file]").val();

            var fileNameOnly = entireValue.substring(entireValue.lastIndexOf('\\') + 1, entireValue.length);

            $("#file-upload span").html(fileNameOnly);
        });

        $('.remove-button').click(function () {
            $('#file-upload span').html('No files selected');
            $('#file-upload input[type=file]').val('');
        });
    });
</script>

问题只发生在 IE 上（我只在 IE10 上测试过）。Firefox 和 Chrome 完美运行。

4

0 回答 0