2014-07-14 8 views
8

Ich benutze HTML5 Datei API, um Dateien zu meiner Webanwendung hochzuladen.Gelesene Datei, die auf irgendeiner URL unter Verwendung der HTML5 Datei API gespeichert wird

Ich habe ein Eingabeelement auf meiner Web-Seite mit denen ich Dateien lesen und Upload-Funktion aufrufen

<input type="file"> 

$('input[type="file"]').on("change",function(e){ 
     console.log(this.files); 
     // upload each file in this.files 
}); 

Das funktioniert perfekt für native Dateien auf os. Ich möchte jetzt entfernte Dateien hochladen, z. B. example.com/blah/file1.jpg. Meine Frage ist, wie lese ich diese Datei mit der Datei-API? Gibt es einen Weg, es zu tun?

+0

Nur eine TextBox für den Benutzer zum Einfügen der URL bereitstellen. Auf der Serverseite können Sie dann die Datei basierend auf der URL abrufen. – mason

+1

Nein dies muss auf der Client-Seite getan werden, es ist eine Browser-Erweiterung. Ich muss die Datei zuerst in den Browser des Benutzers herunterladen und dann hochladen. – sublime

+0

Warum müssen Sie auf den Computer des Benutzers herunterladen und dann auf einen Server hochladen? Das ist ein zusätzlicher Schritt. Speichern Sie es in JavaScript-Speicher wäre schlechte Leistung weise, sowie das Auffrischen der Bandbreite des Benutzers. – mason

Antwort

8

Sie können Remote-Dateien über XMLHttpRequest herunterladen und als Blob verarbeiten. Dann lade es auf einen anderen Server hoch. Der Upload muss über XMLHttpRequest erfolgen. Es stützt sich auf die Umsetzung der Browser von XHR Level 2 Dieser Link, um die Code-Schnipsel enthält, müssen Sie:

http://www.html5rocks.com/en/tutorials/file/xhr2/

es beide Schnipsel hat für Remote-Datei als Blob Herunterladen und eine Blob auf einen Server hochladen.

+0

Dank Tiger, es funktioniert wie ein Charme, außer dass ich alle Metadaten verliere, wenn ich sage var blob = new Blob ([this.response], {type: 'image/png'}); Wie erhalte ich den Dateinamen, nachdem ich das getan habe? – sublime

+0

@sublime: Ich glaube nicht, dass es "Dateiname" gibt, wenn wir eine Datei über das Netzwerk abrufen. Sag, es ist '/ download? Id = 1234', es gibt keinen Dateinamen. Sie müssen also eigene Regeln zum Abrufen des Dateinamens einrichten. Sie können verfolgen, was die meisten Browser tun: 1. Nehmen Sie den letzten Teil des URI-Pfades und behandeln Sie ihn als Datei; 2. Wenn im Antwortheader "content-disposition" vorhanden ist, folgen Sie dem Standard und verwenden Sie den Inhalt als Dateinamen. –

+0

Danke, eine letzte Frage: einige Bild-URLs, die ich bekomme, sind Base64-codierte Datenstrings. Daten: image/jpeg; base64,/9j/4AAQSkZJRgABAQ ... und wenn dies der Fall ist, löst der Browser einen Fehler aus, der besagt, dass XMLHttpRequest Daten: image nicht laden kann. Cross-Ursprungsanforderungen werden nur für HTTP unterstützt. Wie lade ich diese Bilder herunter? – sublime