Ajax - send form and file attachments

IE 10+ Only

by Ben Clayton

HTML

<form id="data" method="post" enctype="multipart/form-data">
    <input type="text" name="first" value="Bob" />
    <input type="text" name="middle" value="James" />
    <input type="text" name="last" value="Smith" />
    <input name="image" type="file" />
    <button>Submit</button>
</form>

JavaScript

$("form#data").submit(function(e) {
    e.preventDefault();    
		
		// in versions of IE < 10 this solution will not work, as FormData is an HTML5 object, not present in IE 8 or 9. 
    var formData = new FormData(this);

    $.ajax({
        url: window.location.pathname,
        type: 'POST',
        data: formData,
        success: function (data) {
            alert(data)
        },
        cache: false,
        contentType: false,
        processData: false
    });
});