Question

我在表单和按钮上有一个fileupload控件。单击一个按钮后，服务器会将文件转换为数据表并循环访问数据表记录以进行验证。

我的问题：验证过程需要很长时间，因此我想将当前正在处理的项目显示给用户。

我的尝试：我发现在这种情况下实现了Ajax和SignalR。但是，Ajax需要使用更新面板才能使用updatefile控件。我试过SignalR然而它有效，它在回发期间无法工作 - ＆gt;显然。

任何人都可以协助我找到解决方案。

谢谢！

Answer 1

嘿，你可以使用像这样的ajaxToolkit的ModalPopupExtender

<ajaxToolkit:ModalPopupExtender ID="ProgressBarModalPopupExtender" runat="server"
                 BackgroundCssClass="ModalBackground" BehaviorID="ProgressBarModalPopupExtender"
                 TargetControlID="hiddenField" PopupControlID="Panel1" DynamicServicePath="" Enabled="True" />
        <asp:Panel ID="Panel1" runat="server" Style="display: none; background-color: #C0C0C0;">
      <p class="wait">Please wait!</p>

    </asp:Panel> 
     <asp:HiddenField ID="hiddenField" runat="server" />

将以上代码添加到您网页上的任何位置，然后在文件上传按钮上尝试此

 <input   type="submit" value="Upload" id="upload"
                     causesvalidation="False" onclick="javascript:return validateAdd();"
                    onserverclick="btnupload_ServerClick" runat="server" />

在javascript中

   function validateAdd() {
              var myExtender = $find('ProgressBarModalPopupExtender');
                    myExtender.show();
                    return true;
                }

并在代码中

protected void btnupload_ServerClick(object sender, EventArgs e)
{
// your code of upload 
//
// your code of upload 

ProgressBarModalPopupExtender.Hide();
}

这应该

Answer 2

如果您只定位HTML5用户，则可以使用FileReader类并使用ajax流式传输文件。这适用于SignalR

我在我的项目中这样做了，也许它可以给你一些指示

(function(app) {
    app.FileUploadViewModel = app.define({
        init: function (parent, file, callback) {
            this.kb = 1024;
            this.bufferSize = this.kb * 512;
            this.speedSampleAt = this.bufferSize; 
            this.file = file;
            this.parent = parent;

            this.reader = new FileReader();
            this.total = this.file.size / this.bufferSize;
            this.current = ko.observable(0);
            this.progress = ko.computed(this.getProgress, this);
            this.speed = ko.observable(0);
            this.speedText = ko.computed(this.getSpeedText, this);
            this.name = this.file.name;

            this.reader.onload = this.onLoadPart.bind(this);
            this.callback = callback;
            this.createStream();
        },
        prototype: {
            createStream: function() {
                app.utils.post("api/upload/createstream", {
                    parentId: this.parent.id,
                    filename: this.file.name
                }, function (id) {
                    this.id = id;
                    this.loadPart();
                }.bind(this));
            },
            getSpeedText: function() {
                return Math.round(this.speed()) + " Mbit / s";
            },
            getProgress: function () {
                return (this.current() / this.total * 100) + "%";
            },
            loadPart: function () {
                var start = this.current() * this.bufferSize;
                this.calculateSpeed(start);
                var blob = this.file.slice(start, start + this.bufferSize);

                this.done = blob.size != this.bufferSize || blob.size === 0;
                this.reader.readAsDataURL(blob);
            },
            onLoadPart: function (part) {
                if (part.loaded === 0) {
                    this.onPartTransfered();
                } else {
                    var base64 = part.target.result.substr(part.target.result.indexOf(",") + 1);
                    app.utils.post("api/upload/Part", { id: this.id, data: base64 }, this.onPartTransfered.bind(this));
                }
            },
            onPartTransfered: function () {
                this.current(this.current() + 1);

                if (this.done) {
                    this.callback(this);
                    app.utils.post("api/upload/closestream", this.id, function (file) {
                        this.parent.addChild(file);
                    }.bind(this));
                } else {
                    this.loadPart();
                }
            },
            calculateSpeed: function (position) {
                if (this.lastSpeedSample === undefined) {
                    this.lastSpeedSample = new Date();
                }

                if (position % this.speedSampleAt === 0) {
                    var delta = new Date() - this.lastSpeedSample;
                    var seconds = delta / 1000;
                    var mbit = this.speedSampleAt / this.kb / this.kb * 8;
                    var speed = mbit / seconds;
                    this.lastSpeedSample = new Date();

                    this.speed(speed);
                }
            }
        }            
    });
})(window.Filebrowser = window.Filebrowser || {});

在回发期间ASP.NET显示进度条

2 个答案: