javascript – 将base64图像字符串传递到xml标签中

我试过这个代码,但它不工作.在xml标签中发送base64字符串的上述问题的任何建议或任何解决方案.
我已经搜索很多关于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>

解决方法

你的代码包含很多错误.我注释了其中一些：

fileSelectedForlogo中的alert($(‘#logoImageKey’).val())在这里,您尝试在实际设置之前访问$(‘#logoImageKey’).val().实际上,这个属性是在oReader.onload回调中设置的,它只在oReader.readAsDataURL(oFile)之后调用.
> file.getElementById(‘preview’)在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”))>再次为了一致性,选择一个命名约定并坚持下去.例如,使用元素ids可以选择骆驼形式,下划线分隔的字符串或破折号,但避免混合>避免使用警报调试JavaScript代码.而是使用几乎任何浏览器现在提供的交互式JavaScript开发控制台,并记录其中的调试信息(例如console.log(xml))>请记住,base64图像的内存占原始内存的4/3倍

原文链接：https://www.f2er.com/js/152793.html

javascript – 将base64图像字符串传递到xml标签中

解决方法

猜你在找的JavaScript相关文章