pl: Eigene Eigenschaften f. FileReader-Instanz

hi,

hier wende ich die MDN-FileApi an.

function showprops(e){
    var props = new Array('name','size','type');

    for(var i = 0; i < e.files.length; i++){
        var freader = new FileReader;
        var file = e.files[i];
        var filename = file['name'];
        if( eav[i] == null){ eav[i] = {} }
        freader.filename = filename;
        freader.filetype = file['type'];
        freader.fileid   = i;
        freader.onload = function(e){
            //console.log(e.target.filename, e.target.result.byteLength);
            eav[e.target.fileid]['bin'] = e.target.result;
            eav[e.target.fileid]['type'] = e.target.filetype;
            eav[e.target.fileid]['name'] = e.target.filename;
        }
        freader.readAsArrayBuffer(file);
        var tab = document.getElementById('showprops');
        var tr = document.createElement('tr');
        tab.appendChild(tr);
        for(var ii = 0; ii < props.length; ii++){
            var att = props[ii];
            var td = document.createElement('td');
            $(td).html(file[att]);
            tr.appendChild(td);
        }
        
        // Ab hier wird der UploadButton sichtbar gemacht
        $('#uploadlink').css('display','block');
    }    
}

Für jede Datei wird eine FileReader-Instanz erstellt und damit ich im onload-Handler auf die jeweiligen Eigenschaften zugreifen kann, hänge ich diese an die FileReader-Instanz "freader". Ganz so glücklich bin ich nicht damit -- gibt es eine andere Lösung?

MfG

  1. Für jede Datei wird eine FileReader-Instanz erstellt und damit ich im onload-Handler auf die jeweiligen Eigenschaften zugreifen kann, hänge ich diese an die FileReader-Instanz "freader". Ganz so glücklich bin ich nicht damit -- gibt es eine andere Lösung?

    Verzichte auf die for-Schleife:

    for(var i = 0; i < e.files.length; i++){
       /* ... */
    }
    

    wird zu

    e.files.forEach(file => /*...*/)
    

    Dann kannst du in dem load-Handler einfach file['type'] und filename verwendent. Alternativ könntest du let- oder const-Bindings benutzen. Die gelten jeweils nur für einen Iterations-Schritt der for-Schleife.

    hier wende ich die MDN-FileApi an.

    Das Mozilla-Developer-Network ist nur eine Dokumentations-Platform für Web-Technologien. Die FileAPI wird vom W3C entiwckelt.

    1. Verzichte auf die for-Schleife:

      for(var i = 0; i < e.files.length; i++){
         /* ... */
      }
      

      wird zu

      e.files.forEach(file => /*...*/)
      

      Gute Idee, danke Dir!!!

      Ansonsten: Den FileReader brauch'n mer garnich ;)

      Die Zuweisung kann direkt verfolgen, aus Perl-Sicht isses egal ob da ein Blob (File) kommt oder ein AttayBuffer ...

              if( eav[i] == null){ eav[i] = {} }
              eav[i]['name'] = file['name'];
              eav[i]['type'] = file['type'];
              eav[i]['bin']  = file;
      

      ... ist mir vorhin noch eingefallen, hatte ich ja schonmal vor einiger Zeit. Habs grad geändert wird schön kurz der Code ;)

      MfG

      1. (...) ein AttayBuffer ...

        Atta(y)boy !

        (scnr)
        Rolf

        1. (...) ein AttayBuffer ...

          Atta(y)boy !

          (scnr)

          Ach Mist, Puffer schon wieder falsch geschreipt ....

          Rolf ;)