在 xml 标签中传递 base64 图像字符串

Question

我试过这段代码，但它不起作用。关于在 xml 标签中发送 base64 字符串的上述问题的任何建议或任何解决方案。我搜索了很多关于使用此 xml 标记（即 xml 解析）传递给 java 服务器的 base64 字符串，但没有得到任何结果。

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>

Answer 1

您的代码有不少错误。我对其中一些进行了注释：

alert($('#LogoImageKey').val()) in fileSelectedForLogo：在这里您试图在实际设置之前访问 $('#LogoImageKey').val()。事实上，这个属性是在 oReader.onload 回调中设置的，该回调仅在 oReader.readAsDataURL(oFile)
document.getElementById('preview') in fileSelectedForLogo：您正在寻找一个未定义的元素（至少在您的 html 片段中）
$('#Name').val() 又是一个未定义的元素（至少在您的 html 片段中）

这是工作代码。我冒昧地添加了一个缺失的元素以及一个 div 来包含图像的 base64 表示（并删除了几个警报）。我保留了基本结构（即使它可能有益于一些认真的重构），以便您更好地理解发生了什么变化。

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>

一些一般性的评论：

在将数据附加到 XML 之前，您应该转义特殊字符 <, >, ", &（这是函数 encodeXML 的作用）
出于一致性原因，避免混合使用 javascript 的 getElementById 和 jQuery 选择器（例如 $("#foo")）
同样为了保持一致性，选择一个命名约定并坚持使用。例如，对于元素 id，选择驼峰字符串、下划线分隔的字符串或破折号分隔的字符串，但要避免混合使用它们
避免使用警报调试您的 javascript 代码。而是使用现在几乎所有浏览器都提供的交互式 javascript 开发控制台，并在那里记录调试信息（例如 console.log(xml)）
请记住，base64 图像占用的内存比原始图像多 4/3 倍

在 xml 标签中传递 base64 图像字符串

passing base64 image string in xml tag

javascript

xml

jquery

base64

xml-parsing