Question

对于那些使用bootstrap的人来说，知道它不支持input type = file，所以我使用jQuery隐藏了asp：fileupload（在文档准备好之后），并且为解决方案（从代码中可以看到< / p>

<script type="text/javascript">
    $(document).ready(function ()
    {
        $('#columnSelect').change(function ()
        {
            getImportColumnOrder();
        });

        // change file upload style similiar to bootstrap style
        //$('#uploader').hide();
        $('#uploader').change(function ()
        {
            var val = $(this).val();
            var file = val.split(/[\\/]/);
            $('#file').val(file[file.length - 1]);

        });

    });

    function getImportColumnOrder()
    {
        var order = '';
        $('#selectOrer').val('');

        $('select', $('#MappingTable')).each(function ()
        {
            order += $(this).prop('selectedIndex') + ',';
        });

        $('#selectOrder').val(order.substr(0, order.length - 1));

    }


</script>
<div class="span12">

                <asp:DropDownList ID="ddl_DBTableList" runat="server" CssClass="combobox" Style="display: inline">

                    <asp:ListItem></asp:ListItem>

                    <asp:ListItem Value="Import_Test">Import_Test</asp:ListItem>

                </asp:DropDownList>

                <asp:FileUpload ID="uploader" runat="server" CssClass="btn" />

                <div class="input-append" style="display: inline;">
                    <input id="file" class="input-medium" type="text" />
                    <a class="btn" onclick="$('input[id=uploader]').click();">Select File</a>
                </div>

                <p />

                <div>
                    <asp:Button ID="btn_uplaod" runat="server" OnClick="doUpload" Text="Upload" CssClass="btn" />
                </div>

                <p />

                <asp:Label ID="result" runat="server" ForeColor="Red"></asp:Label>

                <p />

                <asp:Label ID="data" runat="server" BackColor="#CCCCCC"></asp:Label>

                <p />

                <asp:Button ID="btn_import" runat="server" Text="Next" OnClick="doImport" OnClientClick="getImportColumnOrder();return true;" Visible="false" CssClass="btn btn-success" />

            </div>

单击“选择文件”，弹出文件选择器以进行文件选择。双击文件后，显示文件位置，以及asp文件上载控件。

在Chrome和FF中，当我点击btn_uplaod（按钮）时，它会按照假设运行。在IE中，它将清除fileupload的内容并且不执行任何操作（客户端操作）并且不会进行任何回发。

如果这是一个程序问题，那么Chrome和FF可能无法正常运行。我怀疑是否有任何我需要添加以使IE运行的假设？

单击上传（IE）后的

图像，（浏览链接被清除） enter image description here

点击上传后的图片（Chrome），（按原样运行） enter image description here

谢谢！

我为那些想尝试使用Visual Studio的人制作了一个简单的版本：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="postback_problem.aspx.cs" Inherits="postback_problem" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> </head> <body> <form id="form1" runat="server"> <div> <asp:FileUpload ID="uploader" runat="server" CssClass="btn" /> <div> <input id="file" class="input-medium" type="text" /> <a onclick="$('input[id=uploader]').click();">Select File</a> </div> <p /> <div> <asp:Button ID="btn_uplaod" runat="server" OnClick="doUpload" Text="Upload" CssClass="btn" /> </div> <asp:Label ID="result" runat="server"></asp:Label> </div> </form> </body> </html>

和

 using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class postback_problem : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void doUpload(object sender, EventArgs e) { result.Text = "no problem!"; } }

fileupload的上传按钮在IE和Chrome中的工作方式不同

0 个答案: