在jQuery File Upload的formData中无法获取$('.drop').attr('data-id')

我来帮你分析一下这个问题，其实根源很明确：你在初始化fileupload时直接定义的formData对象是立即求值的，要么当时.drop元素的data-id还没被设置好，要么如果页面中有多个.drop元素，初始化时取的是第一个元素的data-id，但实际触发上传的是另一个元素。而add回调里的this指向的是当前正在操作的那个.drop元素，所以能正确拿到对应的值。

给你两个可行的解决方案：

方案一：将formData改为函数形式（推荐） #

把formData从静态对象改成返回对象的函数，这样每次准备上传数据时都会重新执行函数，此时的this和add回调里的this一致，都是当前触发上传的.drop元素：

$('.drop').fileupload({
    dataType: 'json',
    url: base_path + 'parallax/upload',
    autoUpload: false,
    replaceFileInput: false, // interferes w/ dropify
    // 改为函数，动态生成formData
    formData: function() {
        return {
            id: $(this).attr('data-id'), // 现在能正确获取当前元素的data-id
            stmt: '1',
            '{/literal}{$this->security->get_csrf_token_name()}{literal}': '{/literal}{$this->security->get_csrf_hash()}{literal}'
        };
    },
    add: function (d, c) {
        console.log($(this).attr('data-id'));
        // 剩余代码
    }
});

方案二：在add回调中动态修改formData #

如果更习惯在add回调里处理，可以先在初始化时定义基础的formData，然后在回调里补充或修改id参数：

$('.drop').fileupload({
    dataType: 'json',
    url: base_path + 'parallax/upload',
    autoUpload: false,
    replaceFileInput: false,
    formData: {
        stmt: '1',
        '{/literal}{$this->security->get_csrf_token_name()}{literal}': '{/literal}{$this->security->get_csrf_hash()}{literal}'
    },
    add: function (d, c) {
        var currentId = $(this).attr('data-id');
        // 合并原有formData和新的id参数
        c.formData = $.extend({}, c.formData, { id: currentId });
        console.log(currentId);
        // 若需要手动触发上传，可调用c.submit()
    }
});

这两种方案都能解决你遇到的问题，推荐第一种，因为它更符合jQuery File Upload的设计逻辑，能确保每次上传时都拿到最新的元素属性值。

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