无法通过Ajax将数据发送到php文件

Question

This is my HTML code.I'm not using <form>

<input id="sortpicture" type="file" data-id="7" name="sortpic" multiple/>
<button id="upload">Upload</button>

Here is JS

jQuery('#upload').on('click', function() {
    var file_data = jQuery('#sortpicture').prop('files')[0];       
    var form_data = new FormData();                  
    form_data.append('file', file_data); 
    form_data.append('id', 7); // ---> If I send this only i'm able to access `id` in php. If include `file` not access id in php file.

    jQuery.ajax({
        url: 'upload.php',   
        cache: false,
        contentType: false,
        processData: false,
        data: form_data,                         
        type: 'POST',
        success: function(response){        
        },
        error:function(e){
        }
    });

PHP file

$name = $_FILES['file']['name'];
//print_r($_FILES);
$id = $_POST['id'];    // Unable to get id.

How can I get id in php file.Any suggestions please.

Answer 1

Based on the documentation, I believe you're close. Keep in mind that I have never used the FormData API :) But, if I am interpreting it correctly, it's looking for the "name" attribute.

jQuery('#upload').on('click', function() {
    var formData = new FormData(); 
    var inputData = $('this').find('input');
    var fileData = inputData.files[0];       

    formData.append('file', fileData); //wants name attribute here?//
    formData.append('id', 7);

    jQuery.ajax({
        url: 'upload.php',   
        cache: false,
        contentType: false,
        processData: false,
        data: formData,                         
        type: 'POST',
        success: function(response){        
        },
        error:function(e){
        }
    });
});