Javascript 如何在ajax请求中与formData一起发送附加数据

我有一个文件输入值的ajax请求

onChange

$(':file').change(function(){
        var file = this.files[0];

        var formData = new FormData($('form')[0]);

        var id= $(this).attr('data-post-id'); // What I want to send additionaly to file

        $.ajax({
            url: "http://localhost/bghitn/web/app_dev.php/image/upload",           
            type: 'POST',           
            xhr: function() { 
                var myXhr = $.ajaxSettings.xhr();

                if(myXhr.upload){ 
                    myXhr.upload.addEventListener('progress',progressHandlingFunction, false);
                }
                return myXhr;
            },
            success: completeHandler,
            data: formData,
            data:{id:id}, // what is actually not working
            cache: false,
            contentType: false,
            processData: false
        });        
    });

我正在向html标记添加一个属性，该属性包含我希望与文件相关数据一起发送的

id

<input type="file" name="img" data-post-id="{{entity.id}}" />

我还需要一种等效的方法来获取id。

试试这个

    data:{'id':id,
          'formdata':formData,
},

通过url传递它

$(':file').change(function(){
        var file = this.files[0];

        var formData = new FormData($('form')[0]);

        var id= $(this).attr('data-post-id'); // What I want to send additionnaly to file

        $.ajax({
            url: "http://localhost/bghitn/web/app_dev.php/image/upload?id="+id,
            //...........................................................^....

            type: 'POST',           
            xhr: function() { 
                var myXhr = $.ajaxSettings.xhr();

                if(myXhr.upload){ 
                    myXhr.upload.addEventListener('progress',progressHandlingFunction, false);
                }
                return myXhr;
            },
            success: completeHandler,
            data: formData,

            cache: false,
            contentType: false,
            processData: false
        });        
    });

或者您可以使用

append

方法添加

id

$(':file').change(function(){
        var file = this.files[0];

        var formData = new FormData($('form')[0]);
        formData.append("id",id);
        //...............^.......
        var id= $(this).attr('data-post-id'); // What I want to send additionnaly to file

        $.ajax({
            url: "http://localhost/bghitn/web/app_dev.php/image/upload?",


            type: 'POST',           
            xhr: function() { 
                var myXhr = $.ajaxSettings.xhr();

                if(myXhr.upload){ 
                    myXhr.upload.addEventListener('progress',progressHandlingFunction, false);
                }
                return myXhr;
            },
            success: completeHandler,
            data: formData,

            cache: false,
            contentType: false,
            processData: false
        });        
    });

---

您不会发送两次数据。以这种格式发送：

data: {
  formData : formData,
  id:id
}, 

---

谢谢你抽出时间。然而，我不明白你的答案。我需要发送formData，为什么要删除它。@WhiteLettersandBlankspace我已经更新了我的答案。请检查一下。好的，这就是我正在测试的。我将重新梳理反馈。感谢you@whitelettersandblankspaces控制台中有任何错误或服务器端没有

id

？谢谢，我现在使用append方法没有问题，如接受的答案中所述。再次感谢你的时间我感谢你的时间。这是一个好主意，但是使用这种方法的安全性如何？尝试第二种方法谢谢你的时间Pranav，我将测试第二种方法和反馈。如何在php端获取附加数据？@whitelettersandblankspaces好的，希望有帮助@白字沙盘哦。你能告诉我你面临的问题吗？谢谢，我现在使用append方法没有任何问题，如接受的答案中所述。再次感谢您抽出时间。

data: {
  formData : formData,
  id:id
},