Come inviare il contenuto del modulo multipart / form-data da ajax (no jquery)?

Sto cercando di inviare un modulo senza ricaricare la pagina e sto cercando di capire i dettagli del sotto-cofano quindi non utilizzare alcuna libreria JavaScript:

var http = createRequestObject(); function createRequestObject() { var objAjax; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari objAjax=new XMLHttpRequest(); } else {// code for IE6, IE5 objAjax=new ActiveXObject("Microsoft.XMLHTTP"); } return objAjax; } function display_progress() { ... } function upload_file() { var request = 'UploaderServlet'; http.open('post', request); http.onreadystatechange = display_progress; http.send(null); // HERE PROBABLY THE DATA SHOULD BE SENT } 
Choose a file



Viene chiamato il file upload_file (), ma se ho capito bene, i dati non vengono inviati. Si prega di consulenza per quanto riguarda il modo corretto per inviare i dati.

Passa l’attributo in forma {url:"",method:"",data:{...},callback:function(){}}

 var ajax=function(){ try{ var xml =new XMLHttpRequest(); var args =arguments; var context =this; var multipart =""; xml.open(args[0].method,args[0].url,true); if(args[0].method.search(/post/i)!=-1){ var boundary=Math.random().toString().substr(2); xml.setRequestHeader("content-type", "multipart/form-data; charset=utf-8; boundary=" + boundary); for(var key in args[0].data){ multipart += "--" + boundary + "\r\nContent-Disposition: form-data; name=" + key + "\r\nContent-type: application/octet-stream" + "\r\n\r\n" + args[0].data[key] + "\r\n"; } multipart += "--"+boundary+"--\r\n"; } xml.onreadystatechange=function(){ try{ if(xml.readyState==4){ context.txt=xml.responseText; context.xml=xml.responseXML; args[0].callback(); } } catch(e){} } xml.send(multipart); } catch(e){} } 

Se si desidera ottenere risposta indietro è ansible utilizzare questo

 var response={}; ajax.call(response,{...args...}) 

e puoi recuperare tutti i dati da response.txt o response.xml

Un aggiornamento un po ‘in ritardo

Per quanto riguarda la domanda @Varun relativa al caricamento di , questo codice non può gestire direttamente gli upload di file, al fine di inviare file utilizzando questo codice, è necessario eseguire la pre-elaborazione dei dati del file raw utilizzando File API per ottenere flussi non binari (come base64 o qualsiasi altro tipo di bin2hex).

Ma, poiché è un anno 2015, posso suggerire di passare dalla costruzione dei flussi multipart a qualcosa di un po ‘più robusto, come l’ API FormData .

Il tuo codice XMLHttpRequest sembra diverso dal null che stai trasmettendo send . È necessario passare una stringa contenente i dati da inviare (correttamente codificati, ovviamente).

Nota che se vuoi inviare il file referenziato dal tuo campo input[type=file] , dovrai leggerlo in memoria e l’unico modo per farlo è usare la nuova API File , che non è in generale -supporto ancora.

Se stai tentando di inviare un file con una barra di avanzamento, puoi farlo pubblicando blocchi di esso che hai letto tramite l’API File su un browser che supporta l’API File, magari ricorrere a un uploader basato su Flash come swfupload se il browser non supporta l’API File e ricade in un normale invio di moduli se il browser non supporta Flash.

è necessario passare una stringa contenente i dati da inviare (correttamente codificati, ovviamente).

w File API, che XMLHtth non è ancora ampiamente supportato.

Se stai provando le API su un browser che supporta l’API File, magari ricorrere a un uploader basato su Flash, il codice likpRequest sembra diverso dal null che stai passando a send.e swfupload se il browser non supporta il File API, e tornare a una normale sottomissione di moduli se il browser non supporta l’invio di un file con una barra di avanzamento, è ansible farlo pubblicando blocchi di You you read tramite Fit Flash.