实时进度条ASP.net [英] Real Time Progress Bar ASP.net

问题描述

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

I am uploading Large Video files on Amazon S3, I have to display progress bar while uploading. I am showing progress bar using javascript,but its not real time,for eg if I upload 3 MB video, it shows progress properly(ie 100%) then upload video(However in real,it uploads video while displaying the progress bar) This works fine for small videos,but when I upload videos more then 8MB, it show progress till 100% properly,while browser status(Left most Corner) shows 50% progress. This is how I am doing

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" /> <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，我在上传之前这样做

and on my btnupload_Click, I am doing this before uploading

System.Threading.Thread.Sleep(8000);

如何显示实际进度o f file upload？

推荐答案

Hi,

Quote：

如果要将文件直接上传到Amazon S3，则无法使用Flash或Java显示上传进度信息。





由于安全原因，JavaScript无法访问您的本地文件系统，因此您无法从JavaScript打开文件并上传进度信息。





据我所知，这里有两种选择：





1.通过您自己的网络服务器上传文件，这样您就可以托管服务器端脚本，您可以通过javascript调用该脚本来获取有关上传进度的信息。





2.使用基于flash的上传器，我推荐YUI Uploader。您将能够直接将文件上传到Amazon S3并显示进度信息。

It is not possible to show upload progress information without using Flash or Java if you want to upload files directly to Amazon S3.


Due to security reasons JavaScript doesn't have an access to your local file system, so you can not open file from JavaScript and upload it with progress information.


As far as i know there are two options here:


1. Upload your files through your own webserver, so you can host server side script that you can call from javascript to get information about uploading progress.


2. Use flash based uploader, i recommend YUI Uploader. You will be able to upload files directly to Amazon S3 and show progress information.

Ref： https://forums.aws.amazon.com/thread.jspa?threadID=42957 [ ^ ]

这篇关于实时进度条ASP.net的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！