Getting hold of the response on the client side after file upload request

Question

I am using the typical form based upload file functionality with servlet like in here http://www.tutorialspoint.com/servlets/servlets-file-uploading.htm

The client side code is

<html>
<head>
<title>File Uploading Form</title>
</head>
<body>
<h3>File Upload:</h3>
Select a file to upload: <br />
<form action="UploadServlet" method="post"
                        enctype="multipart/form-data">
<input type="file" name="file" size="50" />
<br />
<input type="submit" value="Upload File" />
</form>
</body>
</html>

The problem is that on the server side, I write a json output to the response object (stream). On the client side, it is doing a redirect. Basically , redirecting to a page where it just shows the json output.

On the client side, how can I take control of the respone? I would like to parse the JSON and do something with it but I can't find "the hook" or how to get the output. I am using Javascript and HTML on my client side (and AJAX when possible)

Thank you

Use ajax to upload your file. http://blog.teamtreehouse.com/uploading-files-ajax — Rick S, Sep 05 '14 at 16:45
If you have an AJAX handler, let's see it. Otherwise, it seems like you're asking us to do your work. [Learn ajax](http://www.w3schools.com/jquery/jquery_ajax_intro.asp) — ncksllvn, Sep 05 '14 at 16:46

score 0 · Accepted Answer · edited May 23 '17 at 11:49

The ajax function

//url,callback,type,FormData,uploadFunc,downloadFunc
function ajax(a,b,e,d,f,g,c){
 c=new XMLHttpRequest;
 !f||(c.upload.onprogress=f);
 !g||(c.onprogress=g);
 c.onload=b;
 c.open(e||'get',a);
 c.send(d||null)
}

https://stackoverflow.com/a/18309057/2450730 works on all latest browsers including mobile.

Ready function

function rdy(){
 console.log(this.response)// or JSON.parse(this.response) if json
}

Progress

function progressup(e){
 console.log(e.loaded/e.total)// or (e.loaded/e.total*100|0)+'%' to get the percent
}

Setting up the form

Assuming your form is the first one, you simply prevent it's default behavior and create a custom function, in this case ajax to send the form.

window.onload=function(){
 document.forms[0].onsubmit=function(e){
  e.preventDefault();
  ajax('upload.php',rdy,'post',new FormData(this),progressup)
 }
}

this is all you need, as you can see the code is short... but it has everything you need.

Note: every type of form is accepted... so you don't have to bother writing extra code to read the form values... this thanks using new FormData()

EDIT

Also the form itself does not need all those extra attributes.

this is enough....(no method,action,enctype)

<form><input type="file" name="file"><input type="submit" value="GO"></form>

alternatively add multiple to your file imput to upload multiple files.

<input type="file" name="file" multiple>

if you have any questions just ask

Thank you cocco but I notice that you are calling php function in here. My backend does not have PHP. Only servlet receiving the request — Snake, Sep 05 '14 at 17:14
oh sure ... just change the location. replace upload.php with the correct upload addresss — cocco, Sep 05 '14 at 17:15
anyway if asking about javascript you should also post some javascript code to better understand your problem. i just posted a short and powerfull way to handle uploads with ajax. — cocco, Sep 05 '14 at 17:18
YEs upload Servlet. Well I used the HTML code like what I put above. I just said I have JS code as well (to indicate that if a solution involve JS then I am ok, just point me).. IF I can just replace it with Upload servlet then great! — Snake, Sep 05 '14 at 17:19

Getting hold of the response on the client side after file upload request

1 Answers1