如何搭建一个最基本的最简单的JQuery File Upload

发布日期：2014-03-03 20:50:41
JQueryJQuery File Upload

最基本最简单的设置

如果想搭建自己的UI，可以仅仅使用basic plugin版本和最小的设置。下面是官网上提供首页index.html，只有最少的需求和最简单done回调处理程序。(参考官网提供的 API 和选项 Options 看如何使用不同的选项和回调函数):

<!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.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>
<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>

响应和数据类型（Response and data type）

上面的例子将dataType 选项设置为json, 希望服务端返回一个JSON响应回来给每个上传文件.

其实也可以处理HTML格式类型作为响应数据内容格式，或者其他格式。这些格式我们可以在done回调函数中处理。

在基本设置中如何显示上传进度

fileupload插件 为每个上传进度（progress）触发 progress 事件，以及触发所以正在运行中的上传进程事件. Event handlers（事件处理器）可以通过事件绑定机制或者widget选项来设置。(参考官网 API 和选项 Options 文档):

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

上面的代码进假定一个进程节点中有个内部元素，通过改变这个内部元素的宽度比例来显示进度状态。

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

这个内部元素可以使用不同的背景色来显示，如下CSS设置:

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

上传过程中如何绑定文件到一个元素节点（How to tie a file to an element node during the life cycle of an upload）

通常我们在一个元素节点上显示上传的文件，这可以通过add回调函数来实现。

为了能在其他的关于文件上传的回调函数中进行访问参考相同的元素，我们可以利用context选项。(这实际上是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.');
        }
    });
});

如何通过点击按钮开始上传（How to start uploads with a button click）

接着上面的例子, 除了可以自动上传外还可以通过点击一个按钮开始上传:

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

如何做客户端的图片大小调整（How to do Client-side Image Resizing）

请参考官网文档 Client side Image Resizing.

 

本文参考官网 https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin 

发表评论