Question

我正在尝试使用bluimp库上传文件时实现进度条，但是网站上没有足够的文档可用。此外，在演示中，他们在上传文件时显示了剩余时间，字节，百分比等。但是，我无法在网上和网站上进行任何解释。

所以任何人都可以请我提供一些指导方针。我很多天都在尝试这个。以下是我的HTML

<div class="progress" id=divProgress style="display:none;">
    <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
        <span class="sr-only">0% complete</span>
    </div>
</div>

这是我的json

$(document).ready(function () {

  $('#fileupload').fileupload({
    url: '/eSignature/Document/UploadFiles',
    forceIframeTransport: false,
    autoUpload: true,
    progressInterval: 100,
    bitrateInterval: 500,
    singleFileUploads: false,
    recalculateProgress: true,
    maxFileSize: 1024,
    done: function (e, data) {
        $("#divResult").html(data.result);
    },
    progressall: function (e, data) {

        $("#divProgress").show();

        var progress = parseInt(data.loaded / data.total * 100, 10);

        $('#divProgress .progress-bar').css(
            'width',
            progress + '%'
        );

    }
  });
});

Answer 1

不确定如何处理您的请求，但是对于MVC4开发人员。

您需要以下库（从Visual Studio或控制台中获取NuGet）：

的jQuery
jQuery UI
jQuery UI Core：Widget
jQuery.FileUpload

在BundlesConfig.cs中添加它

             bundles.Add(new ScriptBundle("~/bundles/bluimp").Include(
                        "~/Scripts/jquery-ui-1.11.2.min.js",
                        "~/Scripts/jQuery.FileUpload/jquery-2.1.1.js",
                        //"~/Scripts/jquery.ui.widget.min.js",
                        //"~/Scripts/cors/jQuery.FileUpload/jquery.xdr-transport.js",
                        //"~/Scripts/cors/jQuery.FileUpload/jquery.postmessage-transport.js",
                        //"~/Scripts/jQuery.FileUpload/jquery.fileupload-angular.js",
                        //"~/Scripts/jQuery.FileUpload/jquery.fileupload.js",
                        //"~/Scripts/jQuery.FileUpload/jquery.fileupload-image.js",
                        //"~/Scripts/jQuery.FileUpload/jquery.iframe-transport.js",
                        //"~/Scripts/jQuery.FileUpload/jquery.fileupload-jquery-ui.js",
                        //"~/Scripts/jQuery.FileUpload/jquery.fileupload-ui.js",
                        //"~/Scripts/jQuery.FileUpload/jquery.fileupload-process"));

jquery.xxx.js 应该包含在 _Layout.cshtml 页面中。将以下内容添加到底部的“上载”页面。

    @section Scripts {
    @Scripts.Render("~/bundles/bluimp")
}

然后最后确保它是异步（异步）调用，因此请使用 WebApi 调用（而不是vanilla控制器。然后还将以下内容添加到样式中（ BundlesConfig带有 StyleBundle 的.cs ：

                      "~/Content/jQuery.FileUpload/css/jquery.fileupload",
                  "~/Content/jQuery.FileUpload/css/jquery.fileupload-ui.css",
                  "~/Content/jQuery.FileUpload/css/jquery.fileupload-ui-noscript.css",
                  "~/Content/jQuery.FileUpload/css/jquery.fileupload-ui.css",

希望它有所帮助（某人）

使用bluimp库的jQuery进度条

1 个答案: