Передача строки изображения base64 в теге xml

Я пробовал этот код, но он не работает. Любые предложения или любые решения для вышеизложенного для отправки строки base64 в тег xml. Я ищу много о строке base64, передающей java-сервер, используя эти теги xml (например, xml-синтаксический анализ), но не получаю никаких результатов.

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

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

function ifValueInsert(value , tagName)
    {
	alert(value+" == "+tagName)
	if(value!=undefined && value!='' && value!=null)
	{
		return "<"+tagName+">"+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="lblupload">Image Upload:</label>
    <input id="image_file" type="file" onChange="fileSelectedForLogo();" />
<input type="button" onClick="creatingXMLRequest();" value="Submit" />
  </body>

ОТВЕТЫ

Ответ 1

В вашем коде достаточно ошибок. Я заметил некоторые из них:

  • alert($('#LogoImageKey').val()) в fileSelectedForLogo: здесь вы пытаетесь получить доступ к $('#LogoImageKey').val() до того, как он был установлен. Фактически этот атрибут устанавливается в обратном вызове oReader.onload, который вызывается только после oReader.readAsDataURL(oFile)
  • document.getElementById('preview') в fileSelectedForLogo: вы ищете элемент, который не определен (по крайней мере, в вашем html-фрагменте)
  • $('#Name').val() снова элемент, который не определен (по крайней мере, в вашем html-фрагменте)

Вот рабочий код. Я взял на себя смелость добавить отсутствующие элементы, а также div, чтобы содержать базовое представление изображения (и удалил пару предупреждений). Я сохранил базовую структуру (хотя это могло бы принести пользу серьезному рефакторингу), чтобы вы лучше поняли, что изменилось.

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, '&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>