jquery input[type=“file“拖拽上传/选择文件上传

使用jQuery实现拖拽上传和选择文件上传的功能，可以通过监听input元素的change事件来实现。以下是实现这一功能的示例代码：

HTML部分：

<input type="file" id="fileUpload" multiple />

jQuery部分：

$(document).ready(function() {
    $('#fileUpload').on('change', function(event) {
        var files = event.target.files; // 获取文件列表
        var fileData = new FormData(); // 创建FormData对象用于存储文件数据
 
        // 循环文件列表，添加到FormData对象中
        $.each(files, function(key, value) {
            fileData.append('file-' + key, value);
        });
 
        // 使用AJAX上传文件
        $.ajax({
            url: 'your-upload-url', // 替换为你的上传URL
            type: 'POST',
            data: fileData,
            processData: false,  // 告诉jQuery不要处理发送的数据
            contentType: false,  // 告诉jQuery不要设置内容类型头
            success: function(response) {
                console.log('文件上传成功', response);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.log('文件上传失败', textStatus);
            }
        });
    });
});

在这段代码中，当用户选择文件或拖拽文件到<input>元素时，change事件被触发，然后通过jQuery的.ajax()方法将文件异步上传到服务器。这里使用了FormData对象来存储文件数据，并设置了processData和contentType为false，这是使用FormData对象上传文件时的标准做法。