Question

我要在Amazon S3上上传大型视频文件，我必须在上传时显示进度条。我正在使用javascript显示进度条，但它不是实时，例如，如果我上传3 MB视频，它显示正常进度（即100％）然后上传视频（但实际上，它在显示进度条时上传视频）这适用于小视频，但是当我上传超过8MB的视频时，它会显示进度直到100％正确，而浏览器状态（最左角）显示50％的进度。这就是我在做的事情

 var size = 2;
  var id = 0;
            function ProgressBar() {
            if (document.getElementById('<%=FileVideoUpload.ClientID %>').value != "") {
                document.getElementById("divProgress").style.display = "block";
                document.getElementById("divUpload").style.display = "block";
                document.getElementById("fakebtn").style.display = "block";
                document.getElementById('<%=btnupload.ClientID %>').style.display = "none";
                id = setInterval("progress()", 250);
                return true;
            }
            else {
                alert("Select a file to upload");
                return false;
            }

        }

        function progress() {
            size = size + 1;
            if (size > 299) {
                clearTimeout(id);
            }
            document.getElementById("divProgress").style.width = size + "pt";
            document.getElementById("<%=lblPercentage.ClientID %>").firstChild.data = parseInt(size / 3) + "%";
            document.getElementById("<%=FileVideoUpload.ClientID %>").disabled = true;
            if (parseInt(size / 3) == 100) {
                document.getElementById("updstatus").innerHTML = "Please Wait..";
            }
        }


 <asp:FileUpload ID="FileVideoUpload" runat="server" />&nbsp;<br />
        <br />
        <asp:Button ID="btnupload" runat="server" Text="Upload" OnClientClick="return ProgressBar()"
            OnClick="btnupload_Click" />
        <input type="button" value="Upload" id="fakebtn" style="display: none" />
        <br />
        <br />
        <div id="divUpload" style="display: none">
            <div style="width: 300pt; text-align: center;" id="updstatus">
                Uploading...</div>
            <div style="width: 300pt; height: 20px; border: solid 1pt gray">
                <div id="divProgress" style="width: 1pt; height: 20px; background-color: Gray; display: none">
                </div>
            </div>
            <div style="width: 300pt; text-align: center;">
                <asp:Label ID="lblPercentage" runat="server" Text="Label"></asp:Label></div>
        </div>

在我的btnupload_Click上，我在上传

之前这样做了

System.Threading.Thread.Sleep(8000);

如何显示文件上传的实际进度？

Answer 1

根据文件上传问题，您无法真正执行ajax上传。但是可能性很小

使用HTML5文件API：File Api
使用第三方库监控进度条。 Jquery ajax file upload plugin

希望这有助于您开始使用。

Answer 2

你可能想看看File upload and Progress events with HTML5 XmlHttpRequest Level 2

希望能帮助你。

实时进度条ASP.net

2 个答案: