使用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：http://malsup.com/jquery/form/

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

你没有改变你的HTML的任何

。