jquery进度条

来源：互联网发布：178个经典c语言源代码编辑：程序博客网时间：2024/06/05 14:42

如何仅使用基本插件（最低安装指南）插件下载包带有一个基于Bootstrap的完整用户界面。

然而，如果你想构建自己的用户界面，可以只使用基本的插件版本和最小的设置。

以下是index.html的一个替代方法，只有最小的要求和一个简单的完成回调处理程序（有关如何使用不同的选项和回调的API和选项）：

<!DOCTYPE HTML>

<html>

<head>

<metacharset="utf-8">

<title>jQuery File Upload Example</title>

</head>

<body>

<inputid="fileupload"type="file"name="files[]"data-url="server/php/"multiple>

<scriptsrc="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<scriptsrc="js/vendor/jquery.ui.widget.js"></script>

<scriptsrc="js/jquery.iframe-transport.js"></script>

<scriptsrc="js/jquery.fileupload.js"></script>

<script>

$(function () {

    $('#fileupload').fileupload({

        dataType:'json',

        done:function (e, data) {

            $.each(data.result.files, function (index, file) {

                $('<p/>').text(file.name).appendTo(document.body);

});

});

});

</script>

</body>

</html>

响应和数据类型上面的示例将dataType选项设置为json，期望服务器为每个上传的文件返回JSON响应。但是，也可以处理HTML内容类型作为响应或任何其他dataType，你可以在你的处理程序中处理。

如何使用基本插件显示上传进度fileupload插件触发各个上传（进度）和所有运行的上传（progressall）的进度事件。事件处理程序可以通过事件绑定机制或作为窗口小部件选项设置（请参阅API和选项文档）：

$('#fileupload').fileupload({

    /* ... */

    progressall:function (e, data) {

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

        $('#progress .bar').css(

            'width',

            progress +'%'

);

});

前面的代码假定一个进度节点，内部元素通过它的宽度百分比显示进度状态：

<divid="progress">

<divclass="bar"style="width: 0%;"></div>

</div>

内部元素应该具有不同于容器节点的背景颜色，通过CSS设置并且需要应用高度：

.bar {

    height: 18px;

    background: green;

如何在上传的生命周期内将文件绑定到元素节点上，您将在元素节点中显示要上传的文件。这可以在add回调中完成。

为了能够在与上传相关的其他回调中引用相同的元素节点，您可以使用上下文选项（实际上是jquery.ajax的一个选项）：

$(function () {

    $('#fileupload').fileupload({

        dataType:'json',

        add:function (e, data) {

            data.context =$('<p/>').text('Uploading...').appendTo(document.body);

            data.submit();

},

        done:function (e, data) {

            data.context.text('Upload finished.');

});

});

如何通过按钮点击开始上传基于上一个示例，可以单击按钮而不是自动开始上传：

$(function () {

    $('#fileupload').fileupload({

        dataType:'json',

        add:function (e, data) {

            data.context =$('<button/>').text('Upload')

                .appendTo(document.body)

                .click(function () {

                    data.context =$('<p/>').text('Uploading...').replaceAll($(this));

                    data.submit();

});

},

        done:function (e, data) {

            data.context.text('Upload finished.');

});

});

0 0