Question

i have 3 problems (!) using a “mighty simple” file-upload-form. i will try to explain shortly :-):

1.) when sending the file to the server script-location as given in action=”” I DO NOT want to open a new window!
But in fact, when i submit a blank window apperas. So for now, i open it with target=”_blank”. Is there a way to say
“Just do your action, send the data to the sript but DO NOT open any window or content?” or “close the blank window
as soon as you opened it :-)?

2.) do you know a way to send http-header fields around with the form just like with ajax? i need to send an authetification

3.) which event (html5 new one?) would you suggest to use to execute AFTER having send the data successfully (in ajax i always use
“complete or success events, is there sth. like that for forms?)

:confused: thanks for your suggestions

<form id="uploaddata" enctype="multipart/form-data" method="post" action="/cgi-bin/send/?auth='+sessionStorage.logindata+'" target="_blank">
<input type="hidden" name="folder" value="'+PATH+'" />
<input id="file" type="file" class="choosefile" max="999" min="1" name="attach" filename="" accept="">
<input type="button" id="formupload" class="submitupload" value="Upload">
<input type="submit"  class="submitupload button" value="Upload">                                         
</form>

Answer 1

Without using AJAX you will lose a lot of your requisites with this form.

By using AJAX you can:
1. prevent a popup
2. add your extra headers
3. have an event

Without AJAX your form’s submit action has to go somewhere, whether a popup or the same window. Your response from the post will determine what displays in the browser.

So, you can take care of problems 1 and 3 on the server side by sending back another webpage which contains the desired actions.

Problem 2 you can send as a query string using the GET method instead of the post method, though they won’t be headers, you can use hidden form fields, but this is less than desirable in most cases. Also, using the post everything in the form is sent with the packet to the server and can be read, but again not in the headers.

I would suggest merely using AJAX to solve your problems, due to its asynchronous and customizable nature, it seems to be a good fit for your problem.

EDIT:
As you’ve asked about the iframe functionality, here’s the form info:

<form id="fileAPITesting" action="startStopResume.aspx" method="POST" target="upload_target" enctype="multipart/form-data" encoding="multipart/form-data">    
      <input type="file" id="fileInput"  name="fileInput"  />
      <button id="submit" type="submit" >Submit</button>  
    </form>
<iframe id="upload_target" name="upload_target" src="#" style="display:none;"></iframe>

This will automatically redirect the post functions to the iframe. You can then add some code (here I’m using jQuery to simplify) to prevent this and use your AJAX:

<script type="text/javascript">
        $('#fileAPITesting').bind('submit', function(e){
            e.preventDefault();         
            fileProcessing(document.getElementById('fileInput'));       
        });
        setStatusArea();        
    </script>

Here, the jQuery Form Plugin becomes quite handy. Also of note, if you link to the Google code repository for jQuery there is a good chance you won’t add overhead to your page, as many other pages use jQuery and it would be in the user’s cache. Here is a link to that page:

http://plugins.jquery.com/project/form

I have a multitude of other requirements with my form, but here is a sample of my backend page:

function fileProcessing(fileToProcess){ 
    // grab file information only allows 1 file at a time
    // In IE have to grab differently
    if(window.File){
        file = fileToProcess.files[0];
        clearForm(false);
        if (file){
            fileLength = file.size;
            fileName = file.name;
            totalBLObs = Math.ceil((fileLength / BYTES_PER_CHUNK));         
            initialInformation();
            $('#stop').toggle();
            hideButtons();
            $('#pause').toggle();
            fileSending();
        }else{
            statusField('No file selected');
        }
    }else{
        // without a the file API we have to submit the entire form to an iframe
        file = fileToProcess;
        clearForm(false);
        fileAPI = false;
        time = new Date();      
        if(file.value){
            // IE cannot get a proper handle on the information
            hideButtons();
            fileName = file.value;
            fileName = fileName.substr(fileName.lastIndexOf('\\') + 1);
            statusField('<br />The File API is not implemented.' + 
                '<br />Attempting alternate method with only start & stop status' + 
                '<br />Started at: ' + time.toLocaleTimeString());          
            $('#fileAPITesting').ajaxSubmit({

                beforeSubmit: function(a,f,o) {
                    o.dataType = 'string';                  
                    try{                        
                        $('#uploadOutput').html('<img src="images/loaderb64.gif"' +  
                            'alt="loading" /><br />Submitting...');
                        $('#uploadOutput').show();
                    }catch(e){
                        statusField('<br />Submitting...');
                    }
                },
                success: function(data) {           
                    if (typeof data == 'object' && data.nodeType)
                        data = elementToString(data.documentElement, true);
                    else if (typeof data == 'object')
                        data = objToString(data);
                    time = new Date();
                    statusField('<br />'+ data + ' at ' + time.toLocaleTimeString());
                    try{
                        $('#progress').hide();
                        $('#progress').html('');
                    }catch(e){
                        // #progress doesn't exist
                    }
                }
            });
        }else{
            statusField('No file selected');
        }
    }   
};

Hope that starts you down the right path.