passing base64 image string in xml tag passing base64 image string in xml tag xml xml

passing base64 image string in xml tag


javascript jquery xml xml-parsing base64

Your code contains quite some errors. I annotated some of them:

  • alert($('#LogoImageKey').val()) in fileSelectedForLogo: here you are trying to access $('#LogoImageKey').val() before it was actually set. In fact this attribute is set in the oReader.onload callback that is only called after oReader.readAsDataURL(oFile)
  • document.getElementById('preview') in fileSelectedForLogo: you are looking for an element that is not defined (at least in your html snippet)
  • $('#Name').val() again an element that is not defined (at least in your html snippet)

Here is the working code. I took the liberty to add a missing elements as well as a div to contain the base64 representation of the image (and removed a couple of alerts). I kept you base structure (even though it could benefit some serious refactoring) so that you better understand what changed.

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);	  } else {    alert(" Please Upload Less 50 KB ")  }	}function encodeXML(str) {  return str.replace(/&/g, '&')    .replace(/</g, '<')    .replace(/>/g, '>')    .replace(/"/g, '"')    .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>
Expand snippet