Question

我正在使用Jquery进度条，但它无法正常工作在进度条中只显示[object Object]％我正在使用jquery liabry和css，但它在我的页面中显示不正确。如何修复它我正在尝试添加更多jquery插件。

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <link type="text/css" href="CSS/ui.all.css" rel="stylesheet" />
    <script type="text/javascript" src="Scripts/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="Scripts/ui.core.js"></script>
    <script type="text/javascript" src="Scripts/ui.progressbar.js"></script>
    <script src="Scripts/jquery-ui.js"></script>
    <script type="text/javascript" src="/js/jquery/ui/jquery.ui.progressbar.min.js"></script>
    <script type="text/javascript">

        $(document).ready(function () {

            $("#Button1").click(function (evt) {
                var xhr = new XMLHttpRequest();
                var data = new FormData();
                var files = $("#FileUpload1").get(0).files;
                for (var i = 0; i < files.length; i++) {
                    data.append(files[i].name, files[i]);
                }
                xhr.upload.addEventListener("progress", function (evt) {
                    if (evt.lengthComputable) {
                        var progress = Math.round(evt.loaded * 100 / evt.total);
                        $("#progressbar").progressbar("value", progress);
                    }
                }, false);
                xhr.open("POST", "Handler.ashx");
                xhr.send(data);

                $("#progressbar").progressbar({
                    max: 100,
                    change: function (evt, ui) {

                        $("#progresslabel").text($("#progressbar").progressbar("value") + "%").toString();
                    },
                    complete: function (evt, ui) {
                        $("#progresslabel").text("File upload successful!");
                    }
                });
                evt.preventDefault();
            });
        });

    </script>
    <style type="text/css">
        .progressbar {
            width: 300px;
            height: 21px;
        }

        .progressbarlabel {
            width: 300px;
            height: 21px;
            position: absolute;
            text-align: center;
            font-size: small;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Label ID="Label1" runat="server" Text="Select File(s) to Upload :"></asp:Label>
            <br />
            <br />
            <asp:FileUpload ID="FileUpload1" runat="server" AllowMultiple="true" />
            <br />
            <br />
            <asp:Button ID="Button1" runat="server" Text="Upload" />
            <br />
            <br />
            <div id="progressbar" class="progressbar">
                <div id="progresslabel" class="progressbarlabel"></div>
            </div>
        </div>
    </form>
</body>
</html>

Answer 1

您可能需要使用

var files = $("#<%= FileUpload1.ClientID %>").get(0).files;

Button

也是如此

$("#<%= Button1.ClientID %>").click(function (evt) {

asp.net将在客户端重命名控件的ID，以确保没有重复项。

Answer 2

i will add following jquery reference and it is working fine.

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="Scripts/jquery-ui.js"></script>
    <script type="text/javascript" src="/js/jquery/ui/jquery.ui.progressbar.min.js"></script>

jquery进度条不起作用

2 个答案: