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

Question

我有一个文件输入值的以下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}}" />

我在 Symfony2 下使用 PHP，例如：

  if ($request->isMethod('POST')) {
            $image = $request->files->get('img');

}

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

Answer 1

通过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
        });        
    });

Answer 2

试试这个，

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

Answer 3

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

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

Answer 4

function AjaxRequests($url,$content_type,$target_id,$additional_data) {
                
        if ($additional_data != '') {
            $additional_data = '&'+$additional_data;
        }
        $.ajax({
            type: "POST",
            url: $url,
            data: "ajaxrequest="+$content_type+$additional_data,
            success: function($response){
                $($target_id).html($response)
            }
        })
    
}