jquery 实现拖动文件上传加载进度条功能

下面是详细讲解jquery实现拖动文件上传加载进度条功能的完整攻略。

一、实现原理

1.通过jquery监听文件拖放事件

使用jquery的dragover和drop事件监听文件的拖放。其中，dragover事件用于表示拖拽操作正在发生，而drop事件用于表示放置操作完成。

$(document).on('dragover', function(e) {
    e.preventDefault();
    e.stopPropagation();
    $(this).addClass('drag-over');
});

$(document).on('drop', function(e) {
    e.preventDefault();
    e.stopPropagation();
    $(this).removeClass('drag-over');
    // 执行文件上传操作
});

2.构造FormData对象上传文件

使用FormData对象可以方便地上传文件和其他表单数据。在drop事件中，首先获取文件对象，然后创建FormData对象，将文件对象添加到FormData中。

var files = e.originalEvent.dataTransfer.files;
var formData = new FormData();
$.each(files, function(key, value) {
    formData.append(key, value);
});

3.使用jquery的ajax方法上传文件

在FormData对象构造完成后，使用jquery的ajax方法上传文件。通过设置processData和contentType属性为false，可以确保文件以正确的方式上传。

$.ajax({
    url: 'upload.php',
    type: 'POST',
    data: formData,
    processData: false,
    contentType: false,
    xhr: function() {
        var xhr = $.ajaxSettings.xhr();
        xhr.upload.onprogress = function(e) {
            // 处理上传进度条的代码
        };
        return xhr;
    },
    success: function(data) {
        // 处理上传成功的代码
    },
    error: function(xhr, status, error) {
        // 处理上传失败的代码
    }
});

4.更新上传进度条

在ajax上传过程中，可以通过监听xhr.upload.onprogress事件更新上传进度条。在监听事件中，计算上传的百分比，然后更新进度条的宽度。

xhr.upload.onprogress = function(e) {
    if (e.lengthComputable) {
        var percent = e.loaded / e.total * 100;
        $('.progress-bar').css('width', percent.toFixed(0) + '%');
    }
};

二、示例说明

下面提供两个示例说明：

示例一：基本的文件上传进度条

<div class="upload-area">
    <span class="drag-text">将文件拖放至此处</span>
</div>
<div class="progress">
    <div class="progress-bar"></div>
</div>

.upload-area {
    width: 200px;
    height: 200px;
    border: 2px dashed #ccc;
    text-align: center;
    line-height: 180px;
    font-size: 16px;
    color: #999;
}

.progress {
    height: 6px;
    background-color: #ddd;
    margin-top: 20px;
}

.progress-bar {
    height: 100%;
    background-color: #00bfff;
    width: 0;
    transition: width .3s ease-in-out;
}

$(document).on('dragover', function(e) {
    e.preventDefault();
    e.stopPropagation();
    $(this).addClass('drag-over');
});

$(document).on('dragleave', function(e) {
    e.preventDefault();
    e.stopPropagation();
    $(this).removeClass('drag-over');
});

$(document).on('drop', function(e) {
    e.preventDefault();
    e.stopPropagation();
    $(this).removeClass('drag-over');

    var files = e.originalEvent.dataTransfer.files;
    var formData = new FormData();
    $.each(files, function(key, value) {
        formData.append(key, value);
    });

    $.ajax({
        url: 'upload.php',
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        xhr: function() {
            var xhr = $.ajaxSettings.xhr();
            xhr.upload.onprogress = function(e) {
                if (e.lengthComputable) {
                    var percent = e.loaded / e.total * 100;
                    $('.progress-bar').css('width', percent.toFixed(0) + '%');
                }
            };
            return xhr;
        },
        success: function(data) {
            // 处理上传成功的代码
        },
        error: function(xhr, status, error) {
            // 处理上传失败的代码
        }
    });
});

示例二：支持多文件上传的进度条

<div class="upload-area">
    <span class="drag-text">将文件拖放至此处</span>
</div>
<div class="progress">
    <div class="progress-bar"></div>
</div>

.upload-area {
    width: 200px;
    height: 200px;
    border: 2px dashed #ccc;
    text-align: center;
    line-height: 180px;
    font-size: 16px;
    color: #999;
}

.progress {
    height: 6px;
    background-color: #ddd;
    margin-top: 20px;
}

.progress-bar {
    height: 100%;
    background-color: #00bfff;
    width: 0;
    transition: width .3s ease-in-out;
}

$(document).on('dragover', function(e) {
    e.preventDefault();
    e.stopPropagation();
    $(this).addClass('drag-over');
});

$(document).on('dragleave', function(e) {
    e.preventDefault();
    e.stopPropagation();
    $(this).removeClass('drag-over');
});

$(document).on('drop', function(e) {
    e.preventDefault();
    e.stopPropagation();
    $(this).removeClass('drag-over');

    var files = e.originalEvent.dataTransfer.files;
    var formData = new FormData();
    $.each(files, function(key, value) {
        formData.append('files[]', value);
    });

    $.ajax({
        url: 'upload.php',
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        xhr: function() {
            var xhr = $.ajaxSettings.xhr();
            xhr.upload.onprogress = function(e) {
                if (e.lengthComputable) {
                    var percent = e.loaded / e.total * 100;
                    $('.progress-bar').css('width', percent.toFixed(0) + '%');
                }
            };
            return xhr;
        },
        success: function(data) {
            // 处理上传成功的代码
        },
        error: function(xhr, status, error) {
            // 处理上传失败的代码
        }
    });
});

在示例二中，多文件上传的处理方式是通过循环添加FormData对象来实现的。具体来说，FormData对象是通过循环添加files[]参数传递给php后端进行处理。需要注意的是，php后端需要使用$_FILES['files']来接收上传的文件。