Загрузка файлов с помощью AJAX

Question

Я пытаюсь загрузить изображение через AJAX, используя простую форму HTML, включая элемент input[type='file'], и formData(), однако, когда я проверяю formData(), он кажется пустым, и на сервер ничего не передается.

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

вы должны добавить файл формировать данные:

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

Answer 2

Прямая загрузка файлов с AJAX работает только для нового browser.insteat использования прямого использования AJAX этого плагина: http://malsup.com/jquery/form/

$(document).ready(function() { 
    $('#add-file').ajaxForm(function() { 
       alert("Upload Done!"); 
    }); 
}); 

вы не должны ничего менять ваш HTML.