蓝冠官网-蓝冠公司|蓝冠招商注册-蓝冠开户
蓝冠官网(主管Q374919)

蓝冠测速注册_jQuery File Upload-jQuery上传插件


 查看演示
 website
 立即下载 插件描述:jQuery File Upload 是一个Jquery图片上传组件,支持多文件上传、取消、删除,上传前缩略图预览、列表显示图片大小,支持上传进度条显示;支持各种动态语言开发的服务器端。

下载文件更新时间:2016-08-19(修改官网调用地址不能访问问题)

jQuery File Upload 是一个Jquery图片上传组件,支持多文件上传、取消、删除,上传前缩略图预览、列表显示图片大小,支持上传进度条显示;支持各种动态语言开发的服务器端。

jQuery File Upload有多个文件选择,拖放上传控件拖放支持,进度条,验证和预览图像,音频和视频 。

支持跨域,分块和可恢复的文件上传和客户端图像大小调整。适用于任何服务器端平台(PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) ,支持标准的HTML表单文件上传。

产品特点

多文件上传:

允许选择多个文件一次,并将其上传同时进行。

用法

下载压缩包,解压到网站就可用(与demo)一样(PHP环境)。

最小化安装向导(适用于需要自己定义界面元素的童鞋):

需要一个input元素:<input id=”fileupload” type=”file” name=”file[]” multiple>

需要加载的js文件有:

代码例子(摘自官方):

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery File Upload Example</title>
</head>
<body>
<input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="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>

最小安装如何显示上传进度条:

插件支持显示每个文件的上传进度(progress)显示和所有文件的总体上传进度(progressall)显示:

$('#fileupload').fileupload({
    /* ... */
    progressall: function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('#progress .bar').css(
            'width',
            progress + '%'
        );
    }
});

需要一个<div>容器用来显示进:

<div id="progress">
    <div class="bar" style="width: 0%;"></div>
</div>

需要给进度条不同颜色显示才行,可以通过CSS来设置:

.bar {
    height: 18px;
    background: green;
}

将要上传的文件名显示在一个元素节点上:

你可以经常要将上传的文件显示到特定的元素上,这个可以通过add回调函数来实现:

$(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 () {
                    $(this).replaceWith($('<p/>').text('Uploading...'));
                    data.submit();
                });
        },
        done: function (e, data) {
            data.context.text('Upload finished.');
        }
    });
});
2020-10-15