拖拽上传区域打开文件而非上传至服务器的问题排查请求

我帮你找到了问题所在，你的拖拽上传逻辑有两个关键问题需要修复：

1. 拖拽时文件获取方式错误：你当前传递给startUpload的是e.dataTransfer.items，这是DataTransferItemList对象，并非直接可用的File数组，浏览器可能因未正确处理文件触发默认打开行为。
2. startUpload函数未实现实际上传逻辑：目前它仅打印文件信息，没有模拟表单提交的上传流程——选择文件是通过表单submit事件触发上传，而拖拽场景需要手动构建FormData并发起AJAX请求。

另外，ondragover事件里只修改了类名但未阻止默认行为，这也会导致浏览器触发默认的文件打开操作，需要补充对应处理。

修改后的完整jQuery代码 #

+ function($) { 
    'use strict'; 

    // UPLOAD CLASS DEFINITION
    // ====================== 
    var dropZone = document.getElementById('drop-zone'); 
    var uploadForm = document.getElementById('js-upload-form'); 

    // 完善上传逻辑：构建FormData并发送AJAX请求
    var startUpload = function(files) {
        // 无文件时直接返回
        if (files.length === 0) return;

        // 构建FormData，模拟表单提交格式
        var formData = new FormData();
        // 遍历文件，与表单name="file"参数对应
        for (var i = 0; i < files.length; i++) {
            formData.append('file', files[i]);
        }

        // 发起AJAX请求，复用表单的action地址
        $.ajax({
            url: uploadForm.action,
            type: 'POST',
            data: formData,
            processData: false, // 禁止处理FormData
            contentType: false, // 让浏览器自动设置正确的Content-Type
            success: function(response) {
                console.log('上传成功:', response);
                // 可在此添加上传成功后的用户提示逻辑
            },
            error: function(xhr, status, error) {
                console.error('上传失败:', error);
                // 可在此添加上传失败后的用户提示逻辑
            }
        });
    }

    // 保留原表单提交逻辑，调用完善后的上传函数
    uploadForm.addEventListener('submit', function(e) {
        var uploadFiles = document.getElementById('js-upload-files').files;
        e.preventDefault();
        startUpload(uploadFiles);
    });

    // 拖拽放下事件：修复文件获取，彻底阻止默认行为
    dropZone.ondrop = function(e) {
        e.preventDefault();
        e.stopPropagation();
        this.className = 'upload-drop-zone';
        // 使用e.dataTransfer.files获取标准File数组
        startUpload(e.dataTransfer.files);
    };

    // 拖拽悬停事件：补充阻止默认行为，避免浏览器触发打开操作
    dropZone.ondragover = function(e) {
        e.preventDefault();
        e.stopPropagation();
        this.className = 'upload-drop-zone drop';
        return false;
    };

    dropZone.ondragleave = function() {
        this.className = 'upload-drop-zone';
        return false;
    };
}(jQuery);

关键改动说明 #

• 统一文件格式：拖拽时改用e.dataTransfer.files获取FileList对象，和表单选择文件得到的格式完全一致，让startUpload可以统一处理两种上传场景。
• AJAX上传逻辑：通过FormData模拟表单提交的参数格式，确保后端PHP能以相同方式接收文件；processData和contentType的配置是AJAX上传文件的必要设置，避免参数被错误解析。
• 彻底阻止默认行为：在ondragover和ondrop事件中添加e.preventDefault()和e.stopPropagation()，完全避免浏览器触发默认的文件打开/下载行为。

修改后，拖拽上传就会和选择文件上传一样，将文件发送至服务器，而不是直接打开文件了。

内容的提问来源于stack exchange，提问作者Sayangdipto Chakraborty