文件输入类型未包含在用于AJAX发送的jquery FormData中

Question

I have a simple form that will be sent via AJAX to a php file for processing, this form includes a file upload, for some reason the file upload is not being included in the data to be sent.

My html form:

<form id="business-form">
                    <label for="business-name">Business Name:</label>
                    <input type="text" id="business-name" name="business-name">
                    <label for="business-location">Business Location:</label>
                    <input type="text" id="business-location" name="business-location">
                    <label for="business-description">Business Description:</label>
                    <input type="text" id="business-description" name="business-description">
                    <label for="fileToUpload">Business image:</label>
                    <input type="file" name="fileToUpload" id="fileToUpload">
                    <button id="create-business">Create New Business</button>
                </form>

My jquery:

function createNewBusiness(){
        var businessName = $('#business-name').val();
        var businessLocation = $('#business-location').val();
        var businessDescription = $('#business-description').val();
        var file_data = $('#fileToUpload').prop('files')[0];

        var sendAJAX = false;

        if (businessDescription.length > 1 && businessLocation.length > 1 && businessName.length > 1) sendAJAX = true;

        if (sendAJAX) {
            var formData = new FormData($("#business-form")[0]);
            var ft = $('#fileToUpload')[0].files[0];
            formData.append("fileToUpload", ft);
            console.log(ft);
            console.log(formData);
            $.ajax({
                url: '/app/business/save_created', // point to server-side PHP script
                dataType: 'text',  // what to expect back from the PHP script, if anything
                cache: false,
                contentType: false,
                processData: false,
                data: formData,
                type: 'post',
                success: function (php_script_response) {
                    alert(php_script_response); // display response from the PHP script, if any
                }
            });
        }else{
            alert("Please fill in all fields to create a new business")
        }
    }

The php script returns:

Array ( [business-name] => fefe [business-location] => fe [business-description] => fe )

When a file is selected, but if the file is left blank i get:

Array ( [business-name] => dede [business-location] => eafrea [business-description] => aefad [fileToUpload] => undefined )

the (cake)php that currently handles the ajax:

public function app_save_created(){
        $this->autoRender = false;
        $this->layout = 'ajax';

        print_r($this->request->data);
    }

Answer 1

Your needs use enctype='multipart/form-data'.

<form id="business-form" enctype='multipart/form-data'>
</form>