JSP AJAX file uploading

Question

I tried to upload a file and display content of the file back to the browser with ajax and jsp. However, it doesn't seem to work very well for me.

Apparently, in JSP page Upload.jsp, when I try to getContentType() from request, request.getcontentType() == null .

Does anyone have experience with this? Thank you much.

Form

<form id="uploadform" name="uploadform" enctype="multipart/form-data" action="Upload.jsp" method="post">
     <input type="file" name="file" id="listfile" onChange="upload(this.value)"/>
</form>

This is the Javascript function upload(ifile)

function upload(ifile){
                if (window.XMLHttpRequest){
                    //IE7 + and other browsers
                    xmlhttp = new XMLHttpRequest();
                }else{
                    //IE 6, 5
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }

                if(xmlhttp == null){
                    alert("File Uploading is not available because your browser does not support AJAX");
                    return;
                }

                //Function to process response form upload.jsp
                xmlhttp.onreadystatechange = function(){
                    if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                        var response = xmlhttp.responseText;

                        alert(response);
                    }
                }

                xmlhttp.open("POST", "Upload.jsp?file="+ifile, true);
                xmlhttp.send(null);
            }

And this is the JSP page Upload.jsp

<%@page import="java.util.StringTokenizer"%>
<%@page import="java.io.*" %>

<%

        response.setContentType("text/html");
        response.setHeader("Cache-control", "no-cache");

    String contentType = request.getContentType();

    if ((contentType != null) && (contentType.indexOf("multipart/form-data") >= 0)) {
        DataInputStream in = new DataInputStream(request.getInputStream());
        //get length of Content type data
        int formDataLength = request.getContentLength();
        byte dataBytes[] = new byte[formDataLength];
        int byteRead = 0;
        int totalBytesRead = 0;
        //convert the uploaded file into byte code
        while (totalBytesRead < formDataLength) {
            byteRead = in.read(dataBytes, totalBytesRead,formDataLength);
            totalBytesRead += byteRead;
        }

                //decode byte array using default charset
        String file = new String(dataBytes);

                //Using StringTokenizer to extract genes list
                StringTokenizer st = new StringTokenizer(file, " ");

                int numtoken = st.countTokens();

                for(int i = 0; i < numtoken-1; i++){
                    st.nextToken();
                    }

                String a = st.nextToken();

                st = new StringTokenizer(a, " \n");
                numtoken = st.countTokens();


                String postlink = "";

                st.nextToken();
                st.nextToken();

                for(int i = 1; i < numtoken-3; i++){
                    String temp = st.nextToken();
                    char[] c = temp.toCharArray();
                    temp = new String(c, 0, c.length-1);
                    if(!" ".equalsIgnoreCase(temp)){
                        postlink = postlink + temp + ",";
                    }
                }

                String temp = st.nextToken();
                postlink = postlink + temp;

                out.println(postlink);
                out.flush();
                out.close();

         }else if (contentType == null){
            out.println("Not a valid file");
            out.flush();
            }
 %>

Solution

Try the following code...

HTML:

<form id="uploadform" name="uploadform" enctype="multipart/form-data" action="Upload.jsp" method="post">
         <input type="file" name="file" id="listfile" onChange="upload()"/>
    </form>

<iframe id="target-iframe" name="target-iframe">
<div id="status">Uploading....</div>

Javascript:

function upload(){
document.getElementById('uploadform').target = 'target_iframe';
document.getElementById('status').style.display="block";
document.getElementById("uploadform").submit();
}

The above Javascript code will redirect the submit to the iframe(Hidden) rather than to the main page itself

JSP:

///do the proccessing in the JSP and in the end output your file content on the some message like follows....
     out.println("<script type='text/javascript'>");
     out.println("parent.document.getElementById('status').innerHTML=\"<center>SUCCESSFULLY UPLOADED</center>\"; alert('SUCCESSFULLY UPLOADED')");
     out.println("</script>");

Hope this helps...

Comments

[Scicare]

Thank you very much. This is very helpful :) Exactly what I was looking for