jq上传进度条

jQuery拖拽上传现在，让我们把学到的东西应用到实践中，来实现一个可拖拽上传文件的功能。我们需要几个库：jquery.js用来作底层库，jquery.ui.js用来构建进度条，jquery.drop.js用来提供抽象的拖拽API，以及jquery.upload.js用来作Ajax上传。我们所有的逻辑都将放在jQuery.ready()中，因此程序会在DOM树构建完成后运行：
//= require <jquery>
//= require <jquery.ui>
//= require <jquery.drop>
//= require <jquery.upload>
jQuery.ready(function($) {
    /* ... */
});创建拖拽目标区域我们想把文件拖拽到#drop元素上，首先要把它转换为释放拖拽的区域。这就需要绑定drop事件，撤销事件并遍历释放拖拽的文件列表，然后将它们传入uploadFile()函数：
var view = $("#drop");
view.dropArea();
view.bind("drop",
function(e) {
    e.stopPropagation();
    e.preventDefault();
    var files = e.originalEvent.dataTransfer.files;
    for (var i = 0; i < files.length; i++) uploadFile(files[i]);
    return false;
});
95｜107上传文件现在来看uploadFile()函数——“让我们见证奇迹发生的时刻！”我们使用jquery.upload.js中的$.upload()函数来发送Ajax上传请求到服务器。然后监听请求的上传进度事件并更新jQuery UI进度条。当上传完成时，我们即刻通知用户上传已经完成，并将元素删除。
var uploadFile = function(file) {
    var element = $("<div />");
    element.text(file.fileName);
    var bar = $("<div />");
    element.append(bar);
    $("#progress").append(element);
    var onProgress = function(e) {
        var per = Math.round((e.position / e.total) * 100);
        bar.progressbar({
            value: per
        });
    };
    var onSuccess = function() {
        element.text("Complete");
        element.delay(1000).fade();
    };
    $.upload("/uploads", file, {
        upload: {
            progress: onProgress
        },
        success: onSuccess
    });
};