Uploading files via jQuery, object FormData is provided and no file name, GET request
forms, jquery
Solution
you should only submit the file - not the complete form
var fileInput = $('#image');
var file = fileInput.files[0];
var formData = new FormData();
formData.append('file', file);
EDIT
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<form enctype="multipart/form-data">
<input type="file" id="image" name="image" accept="Image/*" />
<input type="submit" id="submit" name="" value="Upload" />
</form>
<script>
$('#submit').click(function (event) {
event.preventDefault()
var file = $('#image').get(0).files[0];
var formData = new FormData();
formData.append('file', file);
$.ajax({
url: '/test/file_capture',
//Ajax events
beforeSend: function (e) {
alert('Are you sure you want to upload document.');
},
success: function (e) {
alert('Upload completed');
},
error: function (e) {
alert('error ' + e.message);
},
// Form data
data: formData,
type: 'POST',
//Options to tell jQuery not to process data or worry about content-type.
cache: false,
contentType: false,
processData: false
});
return false;
});
</script>
Problem
I am using a jQuery script to upload files to a new page. It somehow works too, but the issue is that it sends the form data as `object FormData`. Here is the code: ``` $('#submit').click(function () { var formData = new FormData($(this).form); $.ajax({ url: '/test/file_capture', //Ajax events beforeSend: function (e) { alert('Are you sure you want to upload document.'); }, success: function (e) { alert('Upload completed'); }, error: function (e) { alert('error ' + e.message); }, // Form data data: formData, //Options to tell jQuery not to process data or worry about content-type. cache: false, contentType: false, processData: false }); return false; }); ``` The HTML part is as: ``` <form enctype="multipart/form-data"> <input type="file" id="image" name="image" accept="Image/*" /> <input type="submit" id="submit" name="" value="Upload" /> </form> ``` But the link that is generated is as: http://localhost:4965/test/file_capture?[object%20FormData]&_=1386501633340 Which has no image name or any other thing attached to it. What am I missing? Even though there is no error and the request is made and the Upload complete alert is shown.