0

アップロードを行うには、Web システムのユーザーが必要です (最大 4 )。

アップロード自体は機能していますが、開始時にすべてのボックスを表示したくないので、ユーザーが必要になるまで2番目、3番目、4番目のアップロードボックスを非表示にしようとしました。

ここにaspxコード部分

<fieldset>
    <div class="frm tam">
    </div>
    <div class="lin">
        <asp:FileUpload ID="FileUpload1" runat="server" /></div>
    <div class="lin">
        <asp:FileUpload ID="FileUpload2" runat="server" Visible="false" /></div>
    <div class="lin">
        <asp:FileUpload ID="FileUpload3" runat="server" Visible="false" /></div>
    <div class="lin">
        <asp:FileUpload ID="FileUpload4" runat="server" Visible="false" /></div>
    <div class="lin">
        <asp:Button ID="btnUpload" runat="server" Text="Upload"OnClick="btnUpload_Click" />
        <asp:Button ID="btnAdd" runat="server" Text="ADD File" OnClick="btnAdd_Click" />
        <asp:Button ID="btnRem" runat="server" Text="Remove File" OnClick="btnRem_Click" />
    </div>
</fieldset>

ボックスを表示および非表示にするためのコードビハインド

protected void btnAdd_Click(object sender, EventArgs e)
{
    if (FileUpload2.Visible == false)
    {
        FileUpload2.Visible = true;
    }
    else if (FileUpload3.Visible == false)
    {
        FileUpload3.Visible = true;
    }
    else if (FileUpload4.Visible == false)
    {
        FileUpload4.Visible = true;
    }
}

protected void btnRem_Click(object sender, EventArgs e)
{
    if (FileUpload4.Visible == true)
    {
        FileUpload4.Visible = false;
    }
    else if (FileUpload3.Visible == true)
    {
        FileUpload3.Visible = false;
    }
    else if (FileUpload2.Visible == true)
    {
        FileUpload2.Visible = false;
    }
}

[ファイルの追加] をクリックすると、新しいボックスが表示されますが、他のボックスで選択したファイルパスはクリアされます。このクリアを回避できますか？

*編集: ネット フレームワーク 4.0 を使用しています。

4

2 に答える 2

0

ここでの問題は、ファイルのアップロードがほとんどの入力コントロールとは少し異なる動作をすることです...

入力されたファイル パス値を投稿するのではなく、実際にファイル コンテンツを投稿するため、ポストバック時にこの値が失われます。

これらのアップロード コントロールを表示/非表示にするために、クライアントで JavaScript を使用して何かを行うことが最善の策のように思えます。これは、ユーザーが毎回ポストバックを待つ必要がないため、ユーザー エクスペリエンスも向上します。

jQueryでこれを行うことができます...

http://jsfiddle.net/BAwfH/2/

<fieldset>
<div class="frm tam">
</div>
<div class="lin">
    <asp:FileUpload ID="FileUpload1" runat="server" />
</div>
<div class="lin">
    <asp:FileUpload ID="FileUpload2" runat="server" />
</div>
<div class="lin">
    <asp:FileUpload ID="FileUpload3" runat="server" />
</div>
<div class="lin">
    <asp:FileUpload ID="FileUpload4" runat="server" />
</div>
<div>
    <asp:Button ID="btnUpload" runat="server" Text="Upload"OnClick="btnUpload_Click" />
    <asp:Button ID="btnAdd" class="add-button" runat="server" Text="ADD File" OnClick="btnAdd_Click" />
    <asp:Button ID="btnRem" runat="server" Text="Remove File" OnClick="btnRem_Click" />
</div>


<script type="text/javascript">
$(document).ready(function(){
var lines = $('.lin');
lines.hide();
lines.filter(':first').show();

$('.add-button').click(function(){
    lines.filter(':hidden:first').show();

    if(lines.filter(':hidden').length == 0)
        $(this).hide();
});

});

于 2013-04-24T13:53:04.430 に答える
0

ファイルはポストバックで失われます。または、JavaScript を使用してそれを実現することもできます

<div id="div1">
   <asp:FileUpload ID="FileUpload1" runat="server" />
</div>

<div id="div2" style="display:none">   <!-- visibility:hidden -->
   <asp:FileUpload ID="FileUpload2" runat="server" />
</div>

<div id="div3" style="display:none">
   <asp:FileUpload ID="FileUpload3" runat="server" />
</div>

<div id="div4" style="display:none">
   <asp:FileUpload ID="FileUpload4" runat="server" />
</div>

次に、各 FileUpload コントロールを各 div に配置します。

<input type="button" valud="Add" onclick="addControls()" />

次に、JavaScript を使用してそれらを表示します

function addControls()
{
   document.getElementById('div2').style.display = 'inline-block';
   //$('#div2').show(); <--- JQuery
}
于 2013-04-24T13:57:07.777 に答える