0

我试图通过隐藏它并放入我自己的控件来设置 ASP.NET FileUpload 控件的样式。我正在用 jQuery 做这个：

$(function () {
    $('input[type=file]').each(function () {
        var fileUpload = $(this);

        var textBox = $('<input type="text">');
        textBox
            .css('width', fileUpload.width() - 85)
            .css('margin-right', 5)
            .prop('disabled', fileUpload.prop('disabled'));

        var button = $('<input type="button" value="Browse...">')
            .prop('disabled', fileUpload.prop('disabled'));

        fileUpload.change(function () {
            textBox.val(fileUpload.val());
        });

        button.click(function () {
            fileUpload.click();
        });

        fileUpload.after(button).after(textBox);
        fileUpload.hide();
    });
});

这基本上工作得很好，除了我需要在 IE (10) 中单击我的提交按钮两次。我无法在 jsFiddle 中重现这一点，但我确实在它发生的地方做了一个精简的 ASP.NET 项目。

在 Firefox 中，我没有这个问题。有人知道我可以从哪里开始看吗？

4

2 回答 2

0

Fabi 对这个问题的回答为我解决了这个问题。可能是某种安全功能，我不确定。但是通过使用标签进行文件上传，您只需单击一次标签。

不过，您必须将标签设置为按钮。jsFiddle 中有一个很好的解释。我不确定关于 Mozilla 的评论。对我来说，它在 Firefox 中运行良好。

于 2013-08-21T09:31:39.087 回答
-1

出于安全原因，您不能在 IE 中设置 FileUpload 样式，而且您在每个浏览器中的外观可能会有所不同。

一个朋友为我的项目提供的解决方案是隐藏 FileUpload 并在其上放置一些图像。这个概念是给 FileUpload 不透明度 0 和 zindex 高和按钮 zindex 低和绝对位置。

这是我们项目的代码示例

.NewInvoiceDialog .AspFileUpload { 光标：指针；位置：绝对；z-index：1；-moz 不透明度：0.00；不透明度：.00；过滤器：阿尔法（不透明度= 00）；}

.NewInvoiceDialog .stepBlueButtonWrapper.AddInvoiceFile { 浮动：无；z-索引：0；}

.NewInvoiceDialog .stepBlueButtonWrapper.AddInvoiceFile * { z-index:0; 光标：文本；}

        <div style="position:relative; display:inline-block">
            <asp:FileUpload ID="fileUpload" CssClass="NewInvoiceDialog_AspFileUpload" runat="server" ClientIDMode="Static" />
            <div class="stepBlueButtonWrapper AddInvoiceFile">
                <a><span> בחר חשבונית </span></a>
            </div>
        </div>
于 2013-08-21T09:17:22.663 回答