Uploading files via jQuery, object FormData is provided and no file name, GET request

user_1762944 0
Viewed 44795

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.

forms jquery
4 Answers

First get the Object

First get the Object from HTML

 //HTML
 <input id = "file_name" type = "file" />

 //JS
 var formData = new FormData()
 var file_obj = document.getElementById("file_name")
 formData.append('file_name', file_obj.files[0]);
 $.ajax({
    url: url,
    type: 'POST',
    data: formData,
    success: function (data) {

    },
    cache: false,
    contentType: false,
    processData: false
})
user_50779060
Related