While filling the form, I want my users to have a preview on what they just selected in the file input field. For this, I'm trying to avoid any kind of plugin or additional software (except for jQuery).
This is what I got, after some internet research:
$("#file-upload").change(function() {
var formData = new FormData($("#editForm")[0]);
$.ajax({
url: 'script.php', //Server script to process data
type: 'POST',
xhr: function() { // Custom XMLHttpRequest
var myXhr = $.ajaxSettings.xhr();
return myXhr;
},
//Ajax events
success: function(output) {
document.write(output);
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
},
// Form data
data: formData,
//Options to tell jQuery not to process data or worry about content-type.
cache: false,
contentType: false,
processData: false
});
});
The problem with this: formData does not contain any input fields with type="file"!
Any help is appreciated :)