2015-06-20 15 views
10

Ho provato questo codice, ma non funziona. Eventuali suggerimenti o soluzioni per il problema precedente per l'invio di stringa base64 nel tag xml. Ho cercato molto sulla stringa base64 passando al server java usando questo tag xml (cioè l'analisi di xml) ma non ho ottenuto alcun risultato.passaggio stringa immagine base64 nel tag xml

function fileSelectedForLogo() { 
 
    var oFile = document.getElementById('image_file').files[0]; 
 
\t if(oFile.size/1024 <= 50){ 
 
    var oImage = document.getElementById('preview'); 
 
    var oReader = new FileReader(); 
 
\t oReader.onload = function(e){ 
 
     oImage.src = e.target.result; 
 
\t \t var resultStr = oImage.src; 
 
\t \t var result = resultStr.split(","); 
 
\t \t $('#LogoImageKey').val(result[1]); \t \t 
 
\t \t }; 
 
\t \t alert($('#LogoImageKey').val()) 
 
    oReader.readAsDataURL(oFile); \t 
 
\t }else{ 
 
\t \t alert(" Please Upload Less 50 KB ") 
 
\t } \t 
 
    } 
 

 
function creatingXMLRequest(){ 
 
     var Name = \t $('#Name').val(); 
 
     var logoImage \t \t = $('#LogoImageKey').val(); 
 
     alert(logoImage); 
 
     var xml="<Request>" + 
 
       "<Data>" + 
 
       ifValueInsert(Name,"CName")+ 
 
       ifValueInsert(logoImage,"LogoImage")+ 
 
       "</Data>" + 
 
\t \t \t "</Request>"; 
 
    } 
 

 
function ifValueInsert(value , tagName) 
 
    { 
 
\t alert(value+" == "+tagName) 
 
\t if(value!=undefined && value!='' && value!=null) 
 
\t { 
 
\t \t return "<"+tagName+">"+value+"</"+tagName+">"; 
 
\t } 
 
\t return ""; 
 
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<body> 
 
<input type="hidden" id="LogoImageKey" value="" /> 
 
    <label id="lblupload">Image Upload:</label> 
 
    <input id="image_file" type="file" onChange="fileSelectedForLogo();" /> 
 
<input type="button" onClick="creatingXMLRequest();" value="Submit" /> 
 
    </body>

+0

Ciò che non è esattamente lavoro? Sii più preciso. Ci sono errori? Hai codificato tutti i caratteri speciali nella stringa base64? Da http://www.xml.com/pub/a/98/07/binary/binary.html: "Un bitstream arbitrario codificato in Base64 può essere specificato in un documento XML come il contenuto di un elemento, a patto che ogni speciale caratteri come "<" sono rappresentati come entità ("<"). Un'applicazione che legge il documento dovrebbe cercare l'elemento che contiene i dati binari e decodificare la stringa Base64 per ripristinare il flusso binario originale. " –

risposta

5

il codice contiene abbastanza alcuni errori. Ho annotato alcuni di loro:

  • alert($('#LogoImageKey').val()) in fileSelectedForLogo: qui si sta tentando di accedere $('#LogoImageKey').val() prima che in realtà è stato impostato. In realtà questo attributo è impostato nel oReader.onload callback che viene chiamata solo dopo oReader.readAsDataURL(oFile)
  • document.getElementById('preview') in fileSelectedForLogo: siete alla ricerca di un elemento che non è definito (almeno nel tuo snippet HTML)
  • $('#Name').val() di nuovo un elemento che è non definito (almeno nel tuo frammento di codice HTML)

Ecco il codice di lavoro. Mi sono preso la libertà di aggiungere un elemento mancante e un div per contenere la rappresentazione base64 dell'immagine (e rimosso un paio di avvisi). Ti ho mantenuto la struttura di base (anche se potrebbe giovare a qualche serio refactoring) in modo che tu possa capire meglio cosa è cambiato.

function fileSelectedForLogo() { 
 
    var oFile = document.getElementById('image_file').files[0]; 
 
    if(oFile.size/1024 <= 50){ 
 
    var oReader = new FileReader(); 
 
    oReader.onload = function(e){ 
 
     var resultStr = e.target.result; 
 
     var result = resultStr.split(","); 
 
     $('#preview').attr("src", e.target.result); 
 
     $('#LogoImageKey').val(result[1]); 
 
     $('#base64').text(result[1]); 
 
    }; 
 
    oReader.readAsDataURL(oFile); \t 
 
    } else { 
 
    alert(" Please Upload Less 50 KB ") 
 
    } \t 
 
} 
 

 
function encodeXML(str) { 
 
    return str.replace(/&/g, '&amp;') 
 
    .replace(/</g, '&lt;') 
 
    .replace(/>/g, '&gt;') 
 
    .replace(/"/g, '&quot;') 
 
    .replace(/'/g, '&apos;'); 
 
} 
 

 
function creatingXMLRequest(){ 
 
    var Name = $('#Name').val(); 
 
    var logoImage = $('#LogoImageKey').val(); 
 

 
    var xml="<Request>" + 
 
    "<Data>" + 
 
    ifValueInsert(Name,"CName")+ 
 
    ifValueInsert(logoImage,"LogoImage")+ 
 
    "</Data>" + 
 
    "</Request>"; 
 
    console.log(xml); 
 
} 
 

 
function ifValueInsert(value , tagName) { 
 
    //alert(value+" == "+tagName) 
 
    console.log(value+" == "+tagName); 
 
    if(value!=undefined && value!='' && value!=null) { 
 
    return "<"+tagName+">"+encodeXML(value)+"</"+tagName+">"; 
 
    } 
 
    return ""; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<body> 
 
    <input type="hidden" id="LogoImageKey" value="" /> 
 
    <label id="name-upload">Logo Name:</label> 
 
    <input id="Name" type="text" value="" /> 
 
    <label id="lblupload">Image Upload:</label> 
 
    <input id="image_file" type="file" onChange="fileSelectedForLogo();" /> 
 
    <input type="button" onClick="creatingXMLRequest();" value="Submit" /> 
 
    <img id="preview" src="" /> 
 
    <div id="base64" /> 
 
</body>

Alcune osservazioni di carattere generale:

  • prima di aggiungere i dati a un XML si dovrebbe sfuggire caratteri speciali <, >, ", & (questo è ciò che funzionano encodeXML fa)
  • Per ragioni di coerenza evitare miscelazione di javascript getElementById e selettori jQuery (ad es. $("#foo"))
  • Sempre per coerenza, scegliere una convenzione di denominazione e attenersi ad essa. Per esempio con gli id ​​di elementi scegli casestring cammello, stringhe separate da underscore o cruscotti separati ma evita di mescolarli
  • Evita di eseguire il debug del tuo codice javascript utilizzando gli avvisi. Piuttosto utilizzare la console di sviluppo javascript interattivo che quasi tutti i browser offre ora e registrare le informazioni di debug là (ad es console.log(xml))
  • Ricordate che un'immagine base64 occupa circa 4/3 volte più memoria rispetto all'originale
+1

L'aumento delle dimensioni per base64 è solo 4/3 e non 4 volte. –