1

ブートストラップで作業した人は、input type = file をサポートしていないことを知っているので、jQuery を使用して asp:fileupload を非表示にし (ドキュメントの準備ができた後)、ソリューションのために と を用意します (コードからわかるように)

<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 では、ファイル アップロードのコンテンツをクリアし、何もせず (クライアント側のアクション)、ポストバックも行いません。

これがプログラムの問題である場合、Chrome と FF が正しく動作しない可能性があります。IEを想定どおりに実行するために追加する必要があるものがあると思いますか?

アップロードをクリックした後の画像 (IE)、(ブラウズ リンクはクリアされます) ここに画像の説明を入力

アップロードをクリックした後の画像（Chrome）、（想定どおりに実行） ここに画像の説明を入力

ありがとう！

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!"; } }
4

0 に答える 0