Question

我创建了一个进度条并将其设置为不可见。我想在上传按钮点击时显示进度条。在上传过程开始时，无法在按钮单击时显示进度条。我还写了System.Threading.Thread.Sleep（2000）它将在上传过程结束后显示空div。怎么解决这个问题？

这是我的javascript代码......

<script type="text/javascript">
    var size = 2;
    var id = 0;
    function ProgressBar() {
        if (document.getElementById('<%=fileUpload.ClientID%>').value != "") {
            document.getElementById("divProgress").style.display = "block";
            document.getElementById("divUpload").style.display = "block";
            id = setInterval("progress()", 100);
            return true;
        }
        else {
            alert("Select a file to upload");
            return false;
        }
    }
    function progress() {
        size = size + 1;
        if (size > 200) {
            clearTimeout(id);
        }
        document.getElementById("divProgress").style.width = size + "pt";
        document.getElementById("<%=lblPercentage.ClientID %>").firstChild.data = parseInt(size / 2) + "%";
    }
</script>

在default.aspx ...

<div class="span6">
                                <input type="text" id="fileName" class="file_input_textbox" readonly="readonly" disabled="disabled" />
                                <input type="hidden" id="hidFile" runat="server" visible="False" value='<%=fileName.value %>' />
                                <div class="file_input_div">
                                    <input class="file_input_button" style="height: 35px;" type="button" value="Browse.." />
                                    <input id="fileUpload" runat="server" class="file_input_hidden"
                                        onchange="javascript: document.getElementById('fileName').value = this.value" type="file" />
                                </div>
                                &nbsp;&nbsp;&nbsp;(Max 100MB)&nbsp;&nbsp;
                                    <asp:Button ID="btn_upload" runat="server" Text="Upload" OnClick="btn_upload_Click" OnClientClick="return ProgressBar()" />
                            </div>


<asp:Panel ID="pnlProgressbar" runat="server" Visible="false">
                                        <div id="progressbar">
                                            <asp:Label runat="server" ID="lbldisp" Text="Percentage Completed : " />
                                            <asp:Label runat="server" ID="lblStatus" />
                                        </div>
                                        <div id="result"></div>
                                        <br />
                                        <br />
                                    </asp:Panel>

<asp:Panel ID="pnlUploading" runat="server" Visible="false">
                                        <div style="width: 30.9%; height: 20px; border: solid 1pt #4b5964">
                                            <div id="divProgress" style="height: 20px; background-color: #507eba; display: none"></div>
                                            <asp:ImageButton ID="imgCancel" runat="server" ImageUrl="~/Images/cancel_button.jpg" CssClass="cancelBtn" />
                                        </div>
                                        <div style="text-align: left;">
                                            Uploading
                                        <asp:Label ID="lblPercentage" runat="server" Text=""></asp:Label>
                                        </div>
                                    </asp:Panel>

在上传按钮中，我只看到这两个面板，但在进程运行时它将不可见...

实时进度条，带有asp.net中的文件上传控件

0 个答案: