Question

我需要我的网络系统的用户进行上传（最多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;
    }
}

当我单击“添加文件”时，将出现新框，但会清除在其他框中选择的文件路径。我可以避免这个吗？

*编辑：我正在使用net framework 4.0。

Answer 1

这里的问题是上传文件与大多数输入控件的工作方式略有不同......

它不是发布输入的文件路径值，而是实际发布文件内容在回发时，这个值会丢失。

在我看来，最好的办法是在客户端上使用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();
});

}）;

Answer 2

文件在回发时丢失。或者，您可以使用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
}

试图动态asp：FileUpload，刷新麻烦

2 个答案: