jQuery绑定到asp.net中的一个fileupload控件

时间:2013-09-04 13:45:20

标签: jquery asp.net css3 file-upload

我正在使用以下教程更改默认文件上传控件LINK

的CSS

我设法为一个控件实现它但是我需要它在同一页面上用于四个文件上传控件。

问题是它只为一个控件实现了这个。

   // For Custom FileUpload
    $("input[type=file]").filestyle({
        image: '<%= ResolveUrl ("~/images/browse.png") %>',
        imageheight: 22,
        imagewidth: 82,
        width: 128
    });

我将其更改为适用于Class,它仍然仅针对第一个控件实现

$(".fileUpload").filestyle({
    image: '<%= ResolveUrl ("~/images/browse.png") %>',
    imageheight: 22,
    imagewidth: 82,
    width: 128
});

HTML代码示例

<div class="row-form">
    <div class="row-lbl-wrapper"> <span class="row-req">*</span>

        <asp:Label ID="Label1" runat="server" CssClass="row-label" Text="CV:"></asp:Label>
    </div>
    <div class="file-upload-wrapper">
        <asp:FileUpload ID="FileUpload1" runat="server" CssClass="fileUpload" />
        <asp:Button ID="btnUploadCV" runat="server" Text="Upload" CssClass="btn-upload" onclick="btnUploadCV_Click" ValidationGroup="Careers" />
        <asp:Button ID="btnProcessData" runat="server" Text="Process Data" OnClick="btnProcessData_Click" Visible="False" />
        <asp:Label ID="lblImageMSG" runat="server" Text=""></asp:Label>
    </div>
    <div class="tooltip tooltip-override" title="Allowed file formats are .pdf, .doc and .docx.">
        <asp:Image ID="Image2" CssClass="tooltip-img" runat="server" ImageUrl="~/images/tooltipgreen.png" />
    </div>
    <asp:RequiredFieldValidator ID="rfvF1" runat="server" ValidationGroup="Careers" ErrorMessage="*" CssClass="row-validate" ControlToValidate="FileUpload1"></asp:RequiredFieldValidator>
</div>
<div class="row-form">
    <div class="row-lbl-wrapper"> <span class="row-req">*</span>

        <asp:Label ID="Label2" runat="server" CssClass="row-label" Text="CV:"></asp:Label>
    </div>
    <div class="file-upload-wrapper">
        <asp:FileUpload ID="FileUpload2" runat="server" CssClass="fileUpload" />
        <asp:Button ID="Button1" runat="server" Text="Upload" CssClass="btn-upload" onclick="btnUploadCV_Click" ValidationGroup="Careers" />
        <asp:Button ID="Button2" runat="server" Text="Process Data" OnClick="btnProcessData_Click" Visible="False" />
        <asp:Label ID="Label3" runat="server" Text=""></asp:Label>
    </div>
    <div class="tooltip tooltip-override" title="Allowed file formats are .pdf, .doc and .docx.">
        <asp:Image ID="Image3" CssClass="tooltip-img" runat="server" ImageUrl="~/images/tooltipgreen.png" />
    </div>
</div>

我们无法更改它以更改所有文件上传控件的样式。示例如何

enter image description here

1 个答案:

答案 0 :(得分:0)

您应首先调试

$( “文件上传”)

返回多个对象。还要在浏览器中查看生成的页面,css类是否存在于您期望的位置。

我查看了您正在使用的插件,似乎它支持多个对象。