[JavaScript] - File upload naar hidden dynamisch iframe

[gvanh]

Hallo.

Momenteel ben ik bezig met het systeem dat een file wordt geüpload middels een hidden iframe. Dat heb ik wel vaker gedaan en levert an sich geen problemen op.

Om de functionaliteit zoveel mogelijk portable te maken in verschillende formulieren, heb ik nu een JavaScript object gebouwd dat alle nodige functionaliteit op zich neemt om het formulier zo in te richten dat bij het selecteren van een bestand het automatisch wordt geüpload in het iframe. Daarbij wordt ook het hidden iframe dynamisch gecreëerd als het nog niet bestaat. In Firefox werkt dat als een tierelier. Helaas komt vervolgens Internet Explorer (7) om de hoek kijken.

In Internet Explorer 7 werkt de upload zonder problemen wanneer ik vantevoren in het formulier het iframe al in de HTML zet. Wanneer ik echter het iframe dynamisch creëer vanuit de JavaScript, dan "ziet" explorer het iframe niet meer of zo, en wordt dus het geformulier gepost naar een nieuw venster.

Om wat achtergrond-code te geven:

De functie die het iframe teruggeeft. Als het niet bestaat, wordt het aangemaakt.

JavaScript:

    /**
     * Get the hidden iframe with given id (defaults to 'fileframe'). If no
     * iframe with given id exists, try to create it. If this fails, then return
     * false. Otherwise, return the iframe element.
     * 
     * @param   string      id  id for the iframe to get/create.
     * @return  mixed           iframe element found/created or false on failure.
     * @access  private
     */
    function _getHiddenIframe(id) {
        var iframe;         // hidden iframe to get/create.
        
        if ( !id ) id = 'fileframe';
    
        if ( !(iframe = document.getElementById('fileframe')) ) {
            iframe = document.createElement('iframe');
            iframe.id = id;
            iframe.name = id;
            iframe.style.width = '200px';
            iframe.style.height = '200px';
            iframe.style.position = 'absolute';
            iframe.style.top = '0px';
            iframe.style.left = '0px';
            iframe.style.backgroundColor = 'white';
            document.body.appendChild(iframe);
        }
        return iframe || false;
    } // _getHiddenIframe()

Hieronder de code die de nieuwe target voor het formulier instelt op het iframe. Hierbij is 'f' het formulier waar het om gaat. Ik heb gecontroleerd of f het goede formulier is, en dat is het. Ook heb ik gekeken of het iframe wordt herkend als iframe en of de naam klopt. Ook daar geen problemen. Vervolgens heb ik gecontroleerd of het target van het formulier na 'setten' weer goed wordt weergegeven ... ook geen probleem daar. Ik heb de target geprobeerd te setten als onderstaand en als alternatief middels f.setAttribute('target', iframe.name). Dat maakt ook geen verschil.

JavaScript:

// get or create hidden iframe.
iframe = _getHiddenIframe();

// set new property values.
f.target = iframe.name;
f.elements['act'].value = 'processfiles';
f.submit();
f.reset();

Om nog even te benadrukken. Wanneer ik het iframe vantevoren definieer in de HTML van het formulier (als laatste element in de body), dan werkt het als een zonnetje. Maar het idee is juist om niets aan het formulier te hoeven veranderen ... vandaar deze manier van dynamisch creëren.

Heeft iemand een idee wat ik nog zou kunnen proberen om Explorer op het rechte pad te krijgen?

[gvanh]

Ah ... zojuist de oplossing gevonden.

Wanneer je het iframe aanmaakt middels een innerHTML-constructie, dan werkt het wel in alle browsers.

Funky.