0

アプリにアップロード機能があります。この関数はExcelファイルをアップロードし、それを解析してデータをデータベースにコピーします。実際のアップロードはそれほど長くは物語りませんが、構文解析は物語ります。ユーザーに料金を還元できるように、プログレスバーが欲しいのですが。

これをどうやってやるのかよくわかりません。私がオンラインで見つけたものはそれほど役に立ちませんでした。

これは私がこれまでに持っているものです..

私の見解：

<div>
    @using (Html.BeginForm("Upload", "Administrator", FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
        @Html.ValidationSummary(true, "File upload was unsuccessful. Please correct the errors and try again.")
        <input type="file" name="FileUpload1" />
        <input type="submit" name="Submit" id="Submit" value="Upload" onclick=" return startUpload();"/>
    }
</div>
<input type="button" value="test" onclick=" return startUpload();"/>
<div id="loadingScreen" title="Loading...">
    <div id="progressbar"></div>
</div>

私のスクリプト：

<script type="text/javascript">

$(document).ready(function() {
    // create the loading window and set autoOpen to false
    $("#loadingScreen").dialog({
        autoOpen: false,    // set this to false so we can manually open it
        dialogClass: "loadingScreenWindow",
        closeOnEscape: false,
        draggable: false,
        minWidth: 30,
        minHeight: 30,
        modal: true,
        buttons: {},
        resizable: false,
        open: function(event, ui) {
            $(".ui-dialog-titlebar-close").hide();
        },
    }); // end of dialog
});
    $(function () {
        //Progressbar initialization
        $("#progressbar").progressbar({ value: 0 });
    });

    function startUpload() {
        if (confirm("Doing this will override any previous data. Are you sure you want to proceed?")) {
            $("#loadingScreen").dialog('open');
            startProgressBar();
            return true;
        } else {
            return false;
        }
    }
    function startProgressBar() {
        //Making sure that progress indicate 0
        $("#progressbar").progressbar('value', 0);
        //Setting the timer
        setTimeout("updateProgressbar()", 500)
    };

    function updateProgressbar() {
        $.get('@Url.Action("UploadProgress")', function (data) {
            alert(data);
            //Updating progress
            $("#progressbar").progressbar('value', data);
            setTimeout("updateProgressbar()", 500)
        });
    };
</script>

これは、プログレスバーを含むモーダルダイアログボックスを表示しますが、バーは更新されません。

ただし、次のボタンがある場合

<input type="button" value="test" onclick=" return startUpload();"/>

これにより、モーダルボックスが表示され、バーも更新されます。

これから私が理解できるのは、アップロードボタンが投稿を行っているので、取得することができないということです... ???

私はJavaScriptにそれほど慣れていないので、本当に恐ろしいことをしている場合は、私に知らせてください...

4

3 に答える 3

2

これはやり過ぎかもしれませんが、SignalRを使用できます。これは、サーバーとクライアント間のリアルタイム通信専用のライブラリです。

通常のアクションを使用してファイルをアップロードし、解析の進行状況を示す SignalR ページをレンダリングします (サーバーは、解析中にクライアントに定期的な更新を送信します)。

特に進行状況バーに関するウォークスルーについては、この記事を参照してください。

于 2012-05-16T21:03:05.717 に答える
0

素晴らしく簡単なプログレス バーがあります。それは HTML+CSS+JavaScript だけです。スライダーを更新するには、JavaScript 関数を呼び出す必要があります。ここで説明を見つけてください:プログレスバー

于 2012-07-03T13:07:16.400 に答える
0

これが役に立ちますように..送信をクリックしたときに、fadeIn() メソッドを呼び出すだけです。

$('Submit').click(function () {<br />
    $("#loadingScreen").fadeIn();<br />
});
于 2015-04-22T10:25:59.963 に答える