Wie lade ich eine Datei (Anhang) vom Browser hoch?

Question

Ich bekomme keine Dateianhänge, damit der Browser funktioniert.

Einige Hinweise sind here, andere there. The docs sind ziemlich gut, aber ich kann das nicht in einen AJAX-Upload übersetzen.

Ich bin für ein super einfachen HTML/JavaScript-Beispiel (mit oder w/o jQuery) auf der Suche, wie die db ohne die Nutzung von jquery.couch.app eine Datei aus (relativ modern) Browser hochladen .js Wrapper oder Zeug. Je einfacher der Bessere.

Jede Hilfe wird geschätzt.

Answer 1

In Ordnung, hier ist Ihre reine JavaScript-Datei Upload-Implementierung.

Der grundlegende Algorithmus ist wie folgt:

1. die Datei aus dem Dateieingabeelement Get
2. Holen Sie sich die Dateinamen und gibt off Sie das Dateiobjekt
3. Holen Sie sich die neueste Dokument Revision des Dokuments unter Verwendung der abgerufenen Revision zu dokumentieren

die HTML, dass die Datei

Bringen Sie die Datei anhängen Teil besteht im Wesentlichen aus einer einfachen Form mit zwei Elementen, einem Eingang vom Typ file und einem Knopf vom Typ submit.

<form action="/" method="post" name="upload"> 
    <input type="file" name="file" /> 
    <button type="submit" name="submit">Upload</button> 
</form> 

Jetzt zum JavaScript-Teil.

window.onload = function() { 
    var app = function() { 
     var baseUrl = 'http://127.0.0.1:5984/playground/'; 
     var fileInput = document.forms['upload'].elements['file']; 
     document.forms['upload'].onsubmit = function() { 
      uploadFile('foo', fileInput.files[0]); 
      return false; 
     }; 

     var uploadFile = function(docName, file) { 
      var name = encodeURIComponent(file.name), 
      type = file.type, 
      fileReader = new FileReader(), 
      getRequest = new XMLHttpRequest(), 
      putRequest = new XMLHttpRequest(); 

      getRequest.open('GET', baseUrl + encodeURIComponent(docName), 
       true); 
      getRequest.send(); 
      getRequest.onreadystatechange = function(response) { 
       if (getRequest.readyState == 4 && getRequest.status == 200) { 
        var doc = JSON.parse(getRequest.responseText); 
        putRequest.open('PUT', baseUrl + 
         encodeURIComponent(docName) + '/' + 
         name + '?rev=' + doc._rev, true); 
        putRequest.setRequestHeader('Content-Type', type); 
        fileReader.readAsArrayBuffer(file); 
        fileReader.onload = function (readerEvent) { 
         putRequest.send(readerEvent.target.result); 
        }; 
        putRequest.onreadystatechange = function(response) { 
         if (putRequest.readyState == 4) { 
          console.log(putRequest); 
         } 
        }; 
       } 
      }; 
     }; 
    }; 
    app(); 
}; 

Grundsätzlich ich abfangen das submit-Ereignis des Formulars durch meine eigene Funktion der onsubmit Formularereignisbindung und falsch zurück.

In diesem Event-Handler rufe ich meine Hauptfunktion mit zwei Parametern auf. Der erste Name ist der Name des Dokuments und der zweite die hochzuladende Datei.

In meiner uploadFile() Funktion setze ich den Dateinamen, den Dateityp und nehme einige Instanzen. Die erste HTTP-Anfrage ist eine GET-Anfrage, um die aktuelle Revision des Dokuments zu erhalten. Wenn diese Anforderung erfolgreich ist, bereite ich die PUT-Anforderung (die tatsächliche Upload-Anforderung) vor, indem ich die zuvor erhaltene Revision, den richtigen Inhaltstyp, festlege und dann die Datei in einen ArrayBuffer umwandle. Sobald das erledigt ist, sende ich einfach die HTTP-Anfrage, die ich gerade vorbereitet habe, und dann entspanne ich mich.

Die eigenständige Anlage zum Hochladen Schema sieht wie folgt aus:

PUT host/database/document/filename?revision=latest-revision 

Natürlich die richtige Art des Inhalts in der HTTP-Request-Header verwendet wird.

Hinweis: Mir ist bewusst, dass ich hier überhaupt keine defensive Programmierung verwende, ich habe das bewusst der Kürze halber gemacht.