[英]url is an image, but the browser shows the base64 encoding
我正在尝试将图像从javascript上传到Windows Azure Blob存储。
我成功上传了所有Blob块,并且可以提交Blobk Blob列表。
但是,当我尝试导航到该图像时,我得到了它的base64编码,并且浏览器无法将其呈现为图像。
您可以在这里尝试: base64图片
如何在浏览器中显示? 我必须下载该字符串并使用
<img src="data:image/jpeg;base64," />
标签?
如何快速下载图像?
谢谢您的帮助。
在这里,您可以看到带有链接的复制和粘贴的JSFiddle
https://jsfiddle.net/66e47znh/
编辑:代码
我用来读取文件的代码段:
var reader = new FileReader();
reader.onload = function(e){
var data = reader.result;
var binary = '';
var bytes = new Uint8Array(data);
var len = bytes.byteLength;
for (var i = 0; i < len; i++) {
binary += String.fromCharCode( bytes[ i ] );
}
var toSend = {
ext : fileExt,
file : btoa(binary)
};
UploadManager.startBlobUpload("newspic", toSend.file, toSend.ext, {
//Callbacks when the upload finish
});
};
var file = document.getElementById("image").files[0];
var fileName = file.name;
var fileExt = fileName.substr(fileName.lastIndexOf(".")+1);
reader.readAsArrayBuffer(file);
我用来读取文件块的代码段
UploadManager.blobUrl = sasQuery.blobUrl;
UploadManager.submitUri = UploadManager.blobUrl + "?" + sasQuery.sasQueryString;
//File reader
UploadManager.reader = new FileReader();
UploadManager.reader.onload = function(e){
var data = UploadManager.reader.result;
UploadManager.uploadSlicedChunk(data);
};
var fileContent = file.slice(UploadManager.currentFilePointer,
UploadManager.currentFilePointer + UploadManager.maxBlockSize);
UploadManager.reader.readAsArrayBuffer(new Blob([fileContent]), {type : 'image/'+UploadManager.fileExt, endings : 'native'});
我用来上传块的代码段
var num = '' + UploadManager.blockIdCounter;
while(num.length < 10){
num = '0'+num;
}
var blockId = btoa("block-"+num);
var uri = UploadManager.submitUri.substr(0,4)+UploadManager.submitUri.substr(4, UploadManager.submitUri.length)
+"&comp=block&blockId="+blockId;
uri = uri.replace(":80", "");
var requestData = new Uint16Array(data);
var ajaxOption = {
url : uri,
type : "PUT",
data : requestData,
headers : { "Access-Control-Request-Headers" : "x-requested-with" },
crossDomain : true,
processData : false,
beforeSend: function(xhr) {
xhr.setRequestHeader('x-ms-blob-type', 'BlockBlob');
xhr.setRequestHeader("Content-Type", UploadManager.fileType);
xhr.setRequestHeader('Content-Length', requestData.length);
xhr.withCredentials = true;
},
success : function (data, status) {
//Upoad successfull -> update everything.
UploadManager.blockIds.push(blockId);
UploadManager.blockIdCounter += 1;
UploadManager.bytesSent += requestData.length;
UploadManager.currentFilePointer += UploadManager.maxBlockSize;
UploadManager.totalRemainingBytes -= UploadManager.maxBlockSize;
if(UploadManager.totalRemainingBytes < UploadManager.maxBlockSize){
UploadManager.maxBlockSize = UploadManager.totalRemainingBytes;
}
//Prepare next upload;
var percentComplete = ((parseFloat(UploadManager.bytesSent) / parseFloat(UploadManager.fileLen)) * 100).toFixed(2);
if(UploadManager.totalRemainingBytes > 0){
var fileContent = UploadManager.file.slice(UploadManager.currentFilePointer,
UploadManager.currentFilePointer+UploadManager.maxBlockSize);
UploadManager.reader.readAsArrayBuffer(new Blob([fileContent]), {type : 'image/'+UploadManager.fileExt, endings : 'native'});
} else {
UploadManager.commitBlob();
}
},
error : function(jqXHR, status, error){
alert(status + ", "+error+": "+jqXHR.responseText);
}
};
$.ajax(ajaxOption);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.