注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

多语言通用且功能强大的文件上传插件jQuery File Upload

jQuery插件 fishcity 3424浏览

jQuery File Upload是一款很强大的文件上传插件,适用于多种语言,如php,java,.net,node,gae-python,gae-go等,更多请参考官方文档,同时jQuery File Upload可在boostrap库上扩展,创建出更优化美观的上传功能,当然,本文只讲解插件的基本用法,更强大的使用法方和功能参数还是请移步官方。

1、如何快速简洁安装,非常简单,下面是实例代码

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery File Upload Example</title>
</head>
<body>

//构建html代码
<input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple>

//引入核心文件
<script src="http://libs.useso.com/js/jquery/jquery/1.9.1/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>

//写入JS初始化
<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>

上面例子使用的是json数据类型,服务器返回的每一个文件信息也是以json格式解析。当然,插件也可台处理响应式的htm内容或是其它的数据类型,只不过需要你在完成时回调自定义的处理函数。

2、如何让上传时显示时度条

fileupload进度条的触发事件适用于单个或全部上传文件触发,可通过预设绑定机制或插件形式来实现事件的触发。

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

进度条的显示原理是通过上面计算出的百分比数据来改变.bar的宽度来,同时通过CSS设定.bar高亮来实现

<div id="progress">
    <div class="bar" style="width: 0%;"></div>
</div>
.bar {
    height: 18px;
    background: green;
 }

3、如何显示上传中还是上传完的状态

通常,上传一个元素一般都需要显示其上传的状态,那怎么显示呢?原理就是在上传时和完成后调用方法来显示。

$(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.');
        }
    });});

4、添加开始按钮

上面的代码实现的都是选中文件后就自动上传了,有时候需要点击上开始按钮再上传的功能,那怎么添加呢?

$(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.');
        }
    });});

原来是在data.context中加html代码和绑定按钮事件。

好了,jQuery File Upload的基本使用方法就讲完了,预祝你使用成功。

转载请注明:jQ酷 » 多语言通用且功能强大的文件上传插件jQuery File Upload

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。