File Uploading using Ajax?

Question

I am working on a web page where I am using Impromptu Api for dialogbox which includes html form :

            html = '<label>Name&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id="fname" name="fname" value="'+STUDENT_NAME+'"></label><br />'
                        + '<label>Sex<select id="sex"> <option value="m" >Male</option>   <option value="f" selected>Female</option>'
                        + '</select>'
                        + '</label><br />'
                        + '<label>Category<select id="cat"> <option value="a">A</option>   <option value="b" selected>B</option>'
                        + '</select>' + '</label>'+
                        '<input type="file" id="logo">'+ 
                        '<br />';

Using Ajax for submitting the form like this:

         $.ajax({
                        url : 'AddStudent.jsp',
                        data : 'classId=' +
                                 <%=class_id%>
                                + '&name='
                                + document.getElementById('fname').value
                                + '&cat='
                                + document.getElementById('cat').value
                                + '&func=del' + '&sex='
                                + document.getElementById('sex').value,
                        type : 'post',
                        success : function(msg) {
                                              //events}

I have got the code to upload a file like this:

             String saveFile = "";
  String contentType = request.getContentType();
  if ((contentType != null) && (contentType.indexOf("multipart/form-data") >= 0)) {
        DataInputStream in = new DataInputStream(request.getInputStream());
        int formDataLength = request.getContentLength();
        byte dataBytes[] = new byte[formDataLength];
        int byteRead = 0;
        int totalBytesRead = 0;
        while (totalBytesRead < formDataLength) {
              byteRead = in.read(dataBytes, totalBytesRead, formDataLength);
              totalBytesRead += byteRead;
        }
        String file = new String(dataBytes);
        saveFile = file.substring(file.indexOf("filename=\"") + 10);
        saveFile = saveFile.substring(0, saveFile.indexOf("\n"));
        saveFile = saveFile.substring(saveFile.lastIndexOf("\\") + 1, saveFile.indexOf("\""));
        int lastIndex = contentType.lastIndexOf("=");
        String boundary = contentType.substring(lastIndex + 1, contentType.length());
        int pos;
        pos = file.indexOf("filename=\"");
        pos = file.indexOf("\n", pos) + 1;
        pos = file.indexOf("\n", pos) + 1;
        pos = file.indexOf("\n", pos) + 1;
        int boundaryLocation = file.indexOf(boundary, pos) - 4;
        int startPos = ((file.substring(0, pos)).getBytes()).length;
        int endPos = ((file.substring(0, boundaryLocation)).getBytes()).length;
        saveFile = "D:/SERVERE/" + saveFile;
        File ff = new File(saveFile);
        FileOutputStream fileOut = new FileOutputStream(ff);
        fileOut.write(dataBytes, startPos, (endPos - startPos));
        fileOut.flush();
        fileOut.close();

  }

But this wont work with the Ajax method . I want the file must be uploaded on the same page. How could this be done using Ajax or is there any other technique?Please help

Answer 1

If you can use the HTML5 File API and the FormData Object.

var xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress',function(ev){
    console.log((ev.loaded/ev.total)+'%');
}, false);
xhr.onreadystatechange = function(ev){
    // Blah blah blah, you know how to make AJAX requests
};
xhr.open('POST', url, true);
var files = document.getElementById('logo').files;
var data = new FormData();
for(var i = 0; i < files.length; i++) data.append('file'+i, files[i]);
xhr.send(data);

You can do data.append('name', document.getElementById('name')) etc. to append all the other form fields.

Answer 2

this may help you

<input id="avatar" type="file" name="avatar" />
<button id="upload" value="Upload" />

and then

$("#upload").live("click", function() {
    var file_data = $("#avatar").prop("files")[0];   // Getting the properties of file from file field
    var form_data = new FormData();                  // Creating object of FormData class
    form_data.append("file", file_data)              // Appending parameter named file with properties of file_field to form_data
    form_data.append("user_id", 123)                 // Adding extra parameters to form_data
    $.ajax({
                url: "/upload_avatar",
                dataType: 'script',
                cache: false,
                contentType: false,
                processData: false,
                data: form_data,                         // Setting the data attribute of ajax with file_data
                type: 'post'
       })
})