Jak przesłać plik (załącznik) z przeglądarki?

Question

Nie otrzymuję załączników, aby przeglądarka działała.

Niektóre wskazówki są następujące: here, inne there. The docs są całkiem dobre, ale nie jestem w stanie przetłumaczyć tego na przesłanie AJAX.

Szukam super prosty przykład HTML/JavaScript (z lub bez jQuery), jak przesłać plik z (stosunkowo nowoczesnej) przeglądarki do db bez przy użyciu jquery.couch.app .js wrapper lub inne. Im prostsze jest narzędzie rozszerzające.

Każda pomoc doceniona.

Answer 1

Oto prosta implementacja przesyłania plików JavaScript.

Podstawowy algorytm jest tak:

1. Pobierz plik z elementem wejściowym pliku
2. Uzyskaj nazwę pliku i wpisz wyłączyć obiekt pliku
3. Pobierz najnowszą wersję dokumentu z dokumentu aby dołączyć plik do
4. Dołącz plik do dokumentu za pomocą pobranego rewizji

HTML część składa się zasadniczo z prostej postaci z dwoma elementami, wejścia typu file i przycisku typu submit.

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

Teraz do części JavaScript.

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(); 
}; 

Zasadniczo przechwycić zdarzenie submit formularza poprzez wiązanie własną funkcję do formularza onsubmit imprezy i powrót fałszywe.

W tym programie obsługi zdarzenia nazywam moją główną funkcję dwoma parametrami. Pierwsza to nazwa dokumentu, a druga to plik do przesłania.

W mojej funkcji uploadFile() ustawiam nazwę pliku, typ pliku i pobieram niektóre wystąpienia. Pierwsze żądanie HTTP to żądanie GET, aby uzyskać aktualną wersję dokumentu. Jeśli to żądanie się powiedzie, przygotuję żądanie PUT (rzeczywiste żądanie przesyłania), ustawiając poprzednio uzyskaną wersję, właściwy typ zawartości, a następnie przekonwertuję plik na ArrayBuffer. Kiedy to zrobię, po prostu wyślę prośbę HTTP, którą właśnie przygotowałem, a potem się zrelaksuję.

Standalone System mocowania wysyłania wygląda następująco:

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

Oczywiście pomocą odpowiedniego typu zawartości w nagłówku żądania HTTP.

Uwaga: mam świadomość, że w ogóle nie korzystam z programowania obronnego, zrobiłem to celowo dla zwięzłości.