File upload using PrototypeJs method $('formId').request()

Question

I was trying to upload file(s) using PrototypeJs request method but I failed.

The code I am using,

<form enctype="multipart/form-data" id="form1" runat="server" action="ajax.aspx"
onsubmit="upMe(this);return false;" >

If I make return true instead of false, the file is uploaded but that makes postback which I dont want as I am using the method request from PrototypeJs.

And the function upMe is very simple,

function upMe(frmEle) {
        $(frmEle).request({
            method: 'post',
            parameters: {},
            onComplete: function() { alert('file has been uploaded'); }
        });
    }

What I am missing to upload file in the above way?

Thank you so much.

Answer 1

The problem is you're using AJAX instead of normal submission methods to post the form. This would require JavaScript to read the file and include it in the submission, but as you can imagine the ability for a script to read a local file from the client would be rather a large security risk :-)

The answer to this problem is to use a hidden <iframe> element instead, and submit the request to that. You can register event handlers to the iframe's onload event for an oncomplete style callback.

http://www.openjs.com/articles/ajax/ajax_file_upload/