jQuery插件实现文件上传功能（支持拖拽）

下面我将为你详细介绍如何使用jQuery插件实现文件上传功能（支持拖拽），同时给出两个示例说明。

概述：

jQuery插件实现文件上传功能（支持拖拽）需要用到如下技术：

HTML5 FileReader API
HTML5 Drag And Drop API
jQuery

过程：

创建HTML页面结构。在页面上创建一个div元素，用于显示待上传的文件，还需创建一个input元素，用于选择需要上传的文件。

<div id="file-upload" class="drop-area"></div>
<input type="file" id="file-select" multiple>

初始化拖拽区域并绑定事件。为拖拽区域绑定进入、离开、释放等事件，并通过preventDefault方法防止默认打开文件行为。要注意的是，如果不禁用默认事件，浏览器将打开被拖动的文件，而不是上传它。

var dropZone = $('#file-upload');

// 初始化拖拽区域
dropZone.on('dragover', function(e) {
    e.preventDefault();
    $(this).addClass('dragover');
});
dropZone.on('dragleave', function(e) {
    e.preventDefault();
    $(this).removeClass('dragover');
});
dropZone.on('drop', function(e) {
    e.preventDefault();
    $(this).removeClass('dragover');

    // 处理待上传的文件
    var files = e.originalEvent.dataTransfer.files;
    uploadFiles(files);
});

处理文件上传

function uploadFiles(files) {
    // 利用HTML5 FileReader API解析待上传的文件
    var reader = new FileReader();
    reader.readAsDataURL(files[0]);
    reader.onloadend = function() {
        var data = reader.result;
        var fileName = files[0].name;
        var fileSize = files[0].size;

        // 利用jQuery内置的AJAX方法上传文件
        $.ajax({
            url: 'upload.php',
            data: {
                fileData: data,
                fileName: fileName,
                fileSize: fileSize
            },
            type: 'POST',
            success: function() {
                console.log('文件上传成功！');
            }
        });
    };
}

示例1：基本示例

<!DOCTYPE html>
<html>
<head>
    <title>jQuery上传插件</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="file-upload.js"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="file-upload" class="drop-area"></div>
    <input type="file" id="file-select" multiple>
</body>
</html>

示例2：自定义上传方式

$('#file-select').change(function() {
    var files = $(this)[0].files;
    uploadFiles(files);
});

function uploadFiles(files) {
    var formData = new FormData();
    formData.append('file', files[0]);

    // 利用FormData上传文件，避免了手动解析文件和设置XHR对象的事件处理程序
    $.ajax({
        url: 'upload.php',
        type: 'POST',
        dataType: 'json',
        data: formData,
        cache: false,
        contentType: false,
        processData: false,
        success: function(data) {
            console.log('文件上传成功！');
        },
        error: function(xhr) {
            console.log(xhr.responseText);
        }
    });
}

参考资料：