Javascript: caricamento di un file ... senza file

Question

Sto tentando di simulare un caricamento di file senza utilizzare effettivamente un file di input dall'utente. Il contenuto del file verrà generato dinamicamente da una stringa.

È possibile? Qualcuno l'ha mai fatto prima? Ci sono esempi/teoria disponibili?

Per chiarire, so come caricare un file utilizzando tecniche AJAX utilizzando un iframe nascosto e gli amici - il problema è il caricamento di un file che non è nel modulo.

Sto usando ExtJS, ma jQuery è fattibile anche da quando ExtJS può collegarlo (ext-jquery-base).

Answer 1

Perché non utilizzare lo XMLHttpRequest() con il POST?

function beginQuoteFileUnquoteUpload(data) 
{ 
    var xhr = new XMLHttpRequest(); 
    xhr.open("POST", "http://www.mysite.com/myuploadhandler.php", true); 
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    xhr.onreadystatechange = function() 
    { 
     if (xhr.readyState == 4 && xhr.status == 200) 
      alert("File uploaded!"); 
    } 
    xhr.send("filedata="+encodeURIComponent(data)); 
} 

Lo script del gestore sul server scrive solo i dati del file in un file.

EDIT
upload di file ha ancora un HTTP POST con un diverso tipo di contenuto. È possibile utilizzare questo tipo di contenuto e separare i contenuti con i confini:

function beginQuoteFileUnquoteUpload(data) 
{ 
    // Define a boundary, I stole this from IE but you can use any string AFAIK 
    var boundary = "---------------------------7da24f2e50046"; 
    var xhr = new XMLHttpRequest(); 
    var body = '--' + boundary + '\r\n' 
      // Parameter name is "file" and local filename is "temp.txt" 
      + 'Content-Disposition: form-data; name="file";' 
      + 'filename="temp.txt"\r\n' 
      // Add the file's mime-type 
      + 'Content-type: plain/text\r\n\r\n' 
      + data + '\r\n' 
      + boundary + '--'; 

    xhr.open("POST", "http://www.mysite.com/myuploadhandler.php", true); 
    xhr.setRequestHeader(
     "Content-type", "multipart/form-data; boundary="+boundary 

    ); 
    xhr.onreadystatechange = function() 
    { 
     if (xhr.readyState == 4 && xhr.status == 200) 
      alert("File uploaded!"); 
    } 
    xhr.send(body); 
} 

Se si desidera inviare i dati aggiuntivi, basta separare ogni sezione con un confine e descrivere le intestazioni Content-Disposition e tipo di contenuto per ogni sezione . Ogni intestazione è separata da una nuova riga e il corpo viene separato dalle intestazioni da una nuova riga aggiuntiva. Ovviamente, caricare i dati binari in questo modo sarebbe leggermente più difficile :-)

Ulteriori modifiche: dimenticato di menzionare, assicurati che qualsiasi stringa di limite non sia nel "file" di testo che stai inviando, altrimenti lo farà essere trattati come un limite.

Answer 2

Un caricamento di file è solo una richiesta POST con il contenuto del file correttamente codificato e con un'intestazione speciale multipart/formdata. Devi usare quello <input type=file /> perché la sicurezza del tuo browser ti impedisce di accedere direttamente al disco dell'utente.

Poiché non è necessario leggere il disco utente, SI, è possibile simularlo utilizzando Javascript. Sarà solo un XMLHttpRequest. Per creare una richiesta di caricamento "autentica", è possibile installare Fiddler e ispezionare la richiesta in uscita.

Avrai bisogno di codificare correttamente il file, in modo da questo link può essere molto utile: RFC 2388: Returning Values from Forms: multipart/form-data

Answer 3

Ho appena preso questa stringa post_data con l'addon Firefox TamperData. Ho inviato un modulo con un campo type="file" denominato "myfile" e un pulsante di invio denominato "btn-submit" con valore "Carica". Il contenuto del file caricato sono

Line One 
Line Two 
Line Three 

ecco la stringa post_data:

-----------------------------192642264827446\r\n 
Content-Disposition: form-data; \n 
name="myfile"; filename="local-file-name.txt"\r\n 
Content-Type: text/plain\r\n 
\r\n 
Line \n 
One\r\n 
Line Two\r\n 
Line Three\r\n 
\r\n 
-----------------------------192642264827446\n 
\r\n 
Content-Disposition: form-data; name="btn-submit"\r\n 
\r\n 
Upload\n 
\r\n 
-----------------------------192642264827446--\r\n 

Non sono sicuro di cosa si intende il numero (192.642.264.827.446), ma che non dovrebbe essere troppo difficile da trovare su.

Answer 4

Basta condividere il risultato finale, che funziona, e ha un modo pulito di aggiungere/rimuovere parametri senza alcun hardcoding.

var boundary = '-----------------------------' + 
      Math.floor(Math.random() * Math.pow(10, 8)); 

    /* Parameters go here */ 
var params = { 
    file: { 
     type: 'text/plain', 
     filename: Path.utils.basename(currentTab.id), 
     content: GET_CONTENT() /* File content goes here */ 
    }, 
    action: 'upload', 
    overwrite: 'true', 
    destination: '/' 
}; 

var content = []; 
for(var i in params) { 
    content.push('--' + boundary); 

    var mimeHeader = 'Content-Disposition: form-data; name="'+i+'"; '; 
    if(params[i].filename) 
     mimeHeader += 'filename="'+ params[i].filename +'";'; 
    content.push(mimeHeader); 

    if(params[i].type) 
     content.push('Content-Type: ' + params[i].type); 

    content.push(''); 
    content.push(params[i].content || params[i]); 
}; 

    /* Use your favorite toolkit here */ 
    /* it should still work if you can control headers and POST raw data */ 
Ext.Ajax.request({ 
    method: 'POST', 
    url: 'www.example.com/upload.php', 
    jsonData: content.join('\r\n'), 
    headers: { 
     'Content-Type': 'multipart/form-data; boundary=' + boundary, 
     'Content-Length': content.length 
    } 
}); 

Questo è stato testato per funzionare su tutti i browser moderni, compreso ma non limitato a:

• IE6 +
• FF 1.5 +
• Opera 9+
• Chrome 1.0+
• Safari 3.0+

Answer 5

https://stackoverflow.com/a/2198524/2914587 lavorato per me, dopo ho aggiunto un extra '--' prima della finale boundary nel payload:

var body = '--' + boundary + '\r\n' 
     // Parameter name is "file" and local filename is "temp.txt" 
     + 'Content-Disposition: form-data; name="file";' 
     + 'filename="temp.txt"\r\n' 
     // Add the file's mime-type 
     + 'Content-type: plain/text\r\n\r\n' 
     + data + '\r\n' 
     + '--' + boundary + '--'; 

Answer 6

Se non avete bisogno di supporto per i browser meno recenti è possibile utilizzare l'oggetto formdata, che fa parte del File API:

var formData = new FormData(); 
var blob = new Blob(['Lorem ipsum'], { type: 'plain/text' }); 
formData.append('file', blob,'readme.txt'); 

var request = new XMLHttpRequest(); 
request.open('POST', 'http://example.org/upload'); 
request.send(formData); 

File Api è supportato da tutti i browser attuali (IE10 +)

• https://developer.mozilla.org/en-US/docs/Web/API/FormData
• http://caniuse.com/#feat=fileapi

Answer 7

Facile modo per imitare "falso" upload di file con jQuery:

var fd = new FormData(); 
var file = new Blob(['file contents'], {type: 'plain/text'}); 

fd.append('formFieldName', file, 'fileName.txt'); 

$.ajax({ 
    url: 'http://example.com/yourAddress', 
    method: 'post', 
    data: fd, 
    processData: false,  //this... 
    contentType: false   //and this is for formData type 
});