使用AJAX上传文件

Question

I am attempting to upload an image via AJAX using a simple HTML form including a input[type='file'] element, and formData(), however when I inspect formData() it appears to be empty, and nothing is being passed to the server.

jQuery

//Dynamically loaded form

$(document).on('submit', '.update-form', function(e) {
    e.preventDefault();
    var form = $(this);

    amendDatabase(form);
});

function amendDatabase(form) {
    var formData = new FormData(form);
    console.log(formData); //This produces 'formData: No properties'

    var url = 'file.php';

    request = $.ajax({
        url:            url,
        method:         'post',
        data:           formData,
        processData:    false,
        contentType:    false
    });

    request.done(function(data) {
        console.log(data); //This produces an empty/blank return
    });
}

file.php

function uploadFile() {
    echo 'formData was passed to server';
}

uploadFile();

HTML

<form class="update-form" id="add-file" enctype="multipart/form-data">
    <label for="image">Product image</label>
    <input type="file" id="image" name="image" multiple="multiple">
    <div class="hidden-holder">
        <input type="hidden" id="action" name="action" value="file">
    </div>
    <div class="submit-holder">
        <input type="submit">
    </div>
</form>

Answer 1

you should append your file to form data :

// Create a formdata object and add the files
    var data = new FormData();
    $.each(files, function(key, value)
    {
        data.append(key, value);
    });

 $.ajax({
        url: 'submit.php?files',
        type: 'POST',
        data: data,
        cache: false,
        dataType: 'json',
        processData: false, // Don't process the files
        contentType: false, // Set content type to false as jQuery will tell the server its a query string request