File upload jquery

Question

I create jersey REST server and receive file upload. This is the tutorial I follwed: https://gist.github.com/aitoroses/4f7a2b197b732a6a691d

Everything works fine when I try to test the server with Postman. I chose Body, form-data, key: file, value: my picture jpeg

What I try to do is to upload file using form html and jquery Here is my form

<form>
<input id="imgFile" type="file" accept="image/*" value="Add file">
                    <input id="buttonPostReview" class="buttonSend" type="submit" value="Submit">
</form>

and here is my jquery

var postFile = function(e) {
  e.preventDefault();
  var imgFile = $('#imgFile').val();
  var upLoalImgUrl = endPointUrl + 'webresources/photo';
  console.log(imgFile);
  console.log('uploading..');

  $.ajax({
            type: "POST",
            url: upLoalImgUrl,
            data: imgFile,
            async: false,
            cache: false,
            contentType: false,
            enctype: 'multipart/form-data',
            processData: false,
            success: function (returnData) {
              console.log(returnData);
              alert("Data Uploaded: ");
            }
        });
}

But I got error 415 - Unsupported Media Type Can you show me how to upload file using jquery? I try to do some search but I can find the way to do this

That is not how you upload a file with Ajax... – epascarello Nov 28 '17 at 22:06 — epascarello, Nov 28 '17 at 22:06

brandonchinn178 · Accepted Answer · 2017-11-28T22:21:57.403

-1

$(...).val() doesn't get a file from a file input, it just returns the name of the file. You need to do $("#imgFile")[0].files[0] and send the file with FormData:

var data = new FormData();
data.append('file', $("#imgFile")[0].files[0]);
$.ajax({ data: data, ... });

edited Nov 28 '17 at 22:21

answered Nov 28 '17 at 22:06

brandonchinn178

519
3
20

2

That's not how you add items to FormData object – charlietfl Nov 28 '17 at 22:09
Right, forgot my syntax for a sec. Better? – brandonchinn178 Nov 28 '17 at 22:22
So how I do it the right way? I follow your way and I got code 400 bad request – coinhndp Nov 28 '17 at 22:28
var data = new FormData(); var file = $("#imgFile")[0].files[0]; data.append('file', file); – coinhndp Nov 28 '17 at 22:31
This is the right solution for me – coinhndp Nov 28 '17 at 22:31
The post should be edited to the correct code. Your snippet seems to be equivalent to my post. – brandonchinn178 Nov 30 '17 at 20:29

File upload jquery

1 Answers1