How can i upload a file using prototype js ajax call

Question

I have create a varien custom form and want to submit the form using prototype ajax.This form contain four fields

two text field and 
two file field.

But when i submit the data using ajax of prototype js the form did not passed two field and on enctype="multipart/form-data" but does not works. Code:

<form action="bt" method="post" enctype="multipart/form-data" name="new-art-upload" id="new-art-upload">
<input type="text" name="fname" value=""   class="input-text required-entry"/>
<input type="text" name="fname" value="" class="input-text required-entry"  />
<input type="file" name="fileone"  class="required-entry"   />
<input type="file" name="filetwo" class="required-entry"   />
<button type="submit" title="<?php echo $this->__('Save The Art') ?>"  class="button newAdd_Sub" onclick="newartUpload.submit(this)"><span><span><?php echo $this->__('Save Art') ?></button>
</form>

Script:

<script>
    var newartUpload=new VarienForm('new-art-upload');
    newartUpload.submit=function(button,url){
    if(this.validator.validate) {
        var form=this.form;
        var oldUrl = form.action;
        if (url) {
           form.action = url;
        }
        var e=null;
        try{
          // this.form.submit();
           new Ajax.Request(this.form.action,{
            method:this.form.method,
            parameters:this.form.serialize(),
                    contentType: 'multipart/form-data',

            onSuccess:function(transport){
                var response=transport.responseText.evalJSON(true);

            }.bind(this)
            });


        }catch(e){
        }
        if(e){
            throw e;
        }
    }
    }.bind(newartUpload)
</script>

I guess that it may content type and mostly content type in form/

Main issue is that files input fields are not sended to ajax request

Answer 1

You cannot sent files via AJAX calls (at least not on all browsers), but you can simulate an AJAX call and upload a file without a page refresh.
You can take a look at how the category image is uploaded.
You need to have an empty iframe (with id='some_iframe') in the page and submit that form to the iframe by using target='some_iframe'.
Here is a nice tutorial that shows you how to do it.

For real AJAX upload take a look at this but I don't know exactly what browsers are supported. All I know is that IE 9 or below does not allow this.

Answer 2

Have you tried overriding onsubmit? If yes, then DO NOT USE onclick.

I use id's in fields so I can reference getElementById, the form would have to be updated accordingly

var formsub = document.getElementById('new-art-upload');
formsub.onsubmit = function(event) {  
    event.preventDefault(); // prevent the browser from submitting the form

    // process your ajax 
    var A=new FormData();
    A.append("filenameone",document.getElementById('filenameone').value);
    A.append("filenametwo",document.getElementById('filenametwo').value);       
    A.append("fileone",document.getElementById('fileone').files[0]);
    A.append("filetwo",document.getElementById('filetwo').files[0]);        

    var C=new XMLHttpRequest(); 

    C.open("POST",URI); 
    C.onload=function() {
        alert(C.responseText); // do whatever you want after the form posted
    } 
    C.send(A);

}