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
    });
};

注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com