Question

我正在重新设计一个应用程序，我正在尝试获取一个引导进度条来显示上传进度的百分比而不是只是说“请等待”的gif。

我想我需要添加一个事件监听器，但我对JavaScript / JQuery不是很熟悉。你能帮我解决一下我需要添加的内容以获得我想要的最终结果吗？

这是我的观点。

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Async file upload</h2>
<form action="/api/FileUpload" method="post" enctype="multipart/form-data">
    <div id="uploadControls">
        <div>
            <span>Select file(s) to upload :</span>
            <input id="fileUpload" type="file" multiple="multiple" />
        </div>
        <div>
            <input id="btnUpload" type="button" value="Upload" />
        </div>
        <ul id="uploadResults">

        </ul>
    </div>
    <div id="uploadProgress" class="hidden">
        <img src="/images/ajax-loader.gif" alt="" />
    </div>
</form>

<script type="text/javascript">
    $(document).ready(function () {
        $("#btnUpload").click(OnUpload);
    });

    function ShowUploadControls() {
        $("#uploadControls").show();
        $("#uploadProgress").hide();
    }
    function ShowUploadProgress() {
        $("#uploadControls").hide();
        $("#uploadProgress").show();
    }

    function OnUpload(evt) {
        var files = $("#fileUpload").get(0).files;
        if (files.length > 0) {

            ShowUploadProgress();

            if (window.FormData !== undefined) {
                var data = new FormData();
                for (i = 0; i < files.length; i++) {
                    data.append("file" + i, files[i]);
                }
                $.ajax({
                    type: "POST",
                    url: "/api/FileUpload",
                    contentType: false,
                    processData: false,
                    data: data,
                    success: function (results) {
                        ShowUploadControls();
                        $("#uploadResults").empty();
                        for (i = 0; i < results.length; i++) {
                            $("#uploadResults").append($("<li/>").text(results[i]));
                        }
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        ShowUploadControls();
                        alert(xhr.responseText);
                    }
                });
            } else {
                alert("Your browser doesn't support HTML5 multiple file uploads! Please use some decent browser.");
            }
        }
    }


</script>

Answer 1

我使用以下代码获取进度条，仍然让控制器完成上传文件的工作。

在头部我包含了这些脚本

<script src="~/Scripts/jquery-2.1.3.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/modernizr-2.8.3.js"></script>
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="~/Content/bootstrap.css" rel="stylesheet" type="text/css" />

然后是表单和脚本的正文。

@using (Ajax.BeginForm("Index", "Home", new AjaxOptions() { HttpMethod = "POST" }, new { enctype = "multipart/form-data" }))
    {
        <div class="row">
            <div class="col-md-2">
                <h5>Your Name:</h5>
            </div>
            <div class="col-md-4">
                <input type="text" name="uname" class="form-control" required placeholder="John Smith">
            </div>
        </div>
        <div class="row">
            <div class="col-md-2">
                <h5>Your Email:</h5>
            </div>
            <div class="col-md-4">
                <input type="email" name="email" class="form-control" required placeholder="test@test.com">
            </div>
        </div>
        <div class="row">
            <div class="col-md-2">
                <h5>Your Company:</h5>
            </div>
            <div class="col-md-4">
                <input type="text" name="company" class="form-control" required placeholder="Test Company, Inc">
            </div>
        </div>
        <div class="row">
            <div class="col-md-2">
                <h5>Choose file(s) to upload (Max 500MB):</h5>
            </div>
            <div class="col-md-4">
                <input name="files" type="file" id="files" multiple="multiple" class="form-control" required />
            </div>
        </div>
        <div class="row">
            <div class="col-md-2">
                <h5></h5>
            </div>
            <div class="col-md-4">
                <input id="sbmtBtn" type="submit" name="submit" value="Upload" class="btn btn-primary" />
            </div>
        </div>
    }

    <br />
    <div class="progress">
        <div class="progress-bar">0%</div>
    </div>

    <div id="status"></div>

    <script>
        (function () {
            var bar = $('.progress-bar');
            var percent = $('.progress-bar');
            var status = $('#status');

            $('form').ajaxForm({
                beforeSend: function () {
                    status.empty();
                    status.html("Please Wait While We Upload Your File(s)");
                    var percentValue = '0%';
                    bar.width(percentValue);
                    percent.html(percentValue);
                },
                uploadProgress: function (event, position, total, percentComplete) {
                    var percentValue = percentComplete + '%';
                    bar.width(percentValue);
                    percent.html(percentValue);
                },
                success: function (d) {
                    var percentValue = '100%';
                    bar.width(percentValue);
                    percent.html(percentValue);
                    $('#fu1').val('');
                    status.empty();
                    alert(d);
                },
                complete: function (xhr) {
                    status.html("You can Upload again or close this page.");
                }
            });
        })();
    </script>

添加进度条和进度到文件上载

1 个答案: