在xml標簽中傳遞base64圖像字符串
[英]passing base64 image string in xml tag
問題描述
我嘗試了此代碼，但無法正常工作。 對於以上問題的任何建議或解決方案，用於在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>
1 個解決方案
解決方案1
5 已采納 2015-06-22 12:18:25
您的代碼包含很多錯誤。 我注釋了其中一些：
-
alert($('#LogoImageKey').val())在fileSelectedForLogo：在這里，你試圖訪問$('#LogoImageKey').val()之前，它實際上是設置。 實際上，此屬性是在oReader.onload回調中設置的，該回調僅在oReader.readAsDataURL(oFile)之后oReader.readAsDataURL(oFile) -
fileSelectedForLogodocument.getElementById('preview')：您正在尋找未定義的元素（至少在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, '&') .replace(/</g, '<') .replace(/>/g, '>') .replace(/"/g, '"') .replace(/'/g, '''); } 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倍
具有base64字符串的HTML圖像標簽（數據URI）
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.