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

Question

我有一个简单的表单，将通过 AJAX 发送到 php 文件进行处理，该表单包含文件上传，由于某种原因，文件上传未包含在要发送的数据中。

我的 html 表单:

<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>

我的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")
        }
    }

php 脚本返回:

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

当选择一个文件，但如果该文件留空时，我得到:

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

当前处理ajax的(cake)php:

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

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

Answer 1

您的需求使用enctype='multipart/form-data'。

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