2014-07-14 13 views
8

Utilizzo l'API del file HTML5 per caricare i file nella mia applicazione web.Lettura del file memorizzato su qualche URL utilizzando l'API del file HTML5

Ho un elemento di input sulla mia pagina web con il quale ho letto i file e chiamare funzione di upload

<input type="file"> 

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

Questo funziona perfettamente per i file nativi di OS. Ora voglio caricare file remoti, ad es., Esempio.com/blah/file1.jpg La mia domanda è: come leggo questo file utilizzando File API? C'è un modo per farlo?

+0

Basta fornire un TextBox per l'utente per incollare l'URL. Quindi sul lato server è possibile recuperare il file in base all'URL. – mason

+1

no questo deve essere fatto sul lato client, è un'estensione del browser. Devo scaricare il file prima nel browser dell'utente e poi caricare. – sublime

+0

Perché è necessario scaricare sul computer dell'utente, quindi caricare su un server? Questo è un passo in più. Memorizzarlo nella memoria di JavaScript sarebbe una cattiva prestazione, oltre a consumare la larghezza di banda dell'utente. – mason

risposta

8

È possibile scaricare file remoti oltre XMLHttpRequest ed elaborarli come Blob. Quindi caricalo su un altro server. Il caricamento deve essere superiore a XMLHttpRequest. Essa si basa sulla realizzazione del browser di XHR Livello 2. Questo link contiene i frammenti di codice di cui avrete bisogno:

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

Ha entrambe frammenti per il download di file remoto come un Blob e il caricamento di un Blob a un server.

+0

grazie tigre, ha funzionato come un incantesimo tranne che perdo tutti i metadati quando dico var blob = new Blob ([this.response], {type: 'image/png'}); come ottengo il nome del file dopo averlo fatto? – sublime

+0

@sublime: Non penso che ci sia "nomefile" se stiamo recuperando un file tramite la rete. Diciamo che è "/ download? Id = 1234', non esiste alcun nome di file. Quindi è necessario impostare le proprie regole su come ottenere il nome del file. Puoi seguire ciò che fa la maggior parte dei browser: 1. Prendi l'ultima parte del percorso URI e trattala come un file; 2. Se 'content-disposition' esiste nell'intestazione della risposta, segui lo standard e usa cosa c'è dentro come nome file. –

+0

Grazie, un'ultima domanda: alcuni URL di immagini che sto ricevendo sono stringhe di dati codificati in base 64. data: image/jpeg; base64,/9j/4AAQSkZJRgABAQ ... e quando questo è il caso il browser genera un errore che dice che XMLHttpRequest non può caricare dati: l'immagine, le richieste di cross-cross sono supportate solo per HTTP. Come faccio a scaricare quelle immagini? – sublime