displaying images using file reader and blob - javascript

I want display a set of thumbnail images using fileReader api of javascript.I will send requests to my server and it will respond with a stream of bytes.I am sending requests through native xhr methods.But its not displaying any images.
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="/js/jquery-2.1.1.js"></script>
<script>
var thumbURL = ['https://domainname.com/api/th/1','https://domainname.com/api/th/2','https://domainname.com/api/th/3','https://domainname.com/api/th/4','https://domainname.com/api/th/5','https://domainname.com/api/th/6'];
(function(){
for(var i=0;i<thumbURL.length;i++){
var oReq = new XMLHttpRequest();
oReq.open("GET", thumbURL[i]);
oReq.responseType = "blob";
oReq.onload = function(oEvent) {
if (this.status == 200) {
var fileReader = new window.FileReader();
fileReader.readAsDataURL(this.response);
var response=fileReader.result;
$("#thumbnails").append("<img src="+response+"></div>");
}
};
oReq.send();
}
})();
</script>
</head>
<body>
<div id="thumbnails"></div>
</body>
</html>
Any help will be greatly appreciated.Thanks in advance.
UPDATE:correct solution
<html>
<head>
<script type="text/javascript" src="/js/jquery-2.1.1.js"></script>
<script>
var thumbURL = ['https://domainname.com/api/th/1','https://domainname.com/api/th/2','https://domainname.com/api/th/3','https://domainname.com/api/th/4','https://domainname.com/api/th/5','https://domainname.com/api/th/6'];
(function(){
for(var i=0;i<thumbURL.length;i++){
var oReq = new XMLHttpRequest();
oReq.open("GET", thumbURL[i]);
oReq.responseType = "blob";
oReq.onload = function(oEvent) {
if (this.status == 200) {
var filereader=new window.FileReader();
filereader.readAsDataURL(this.response);
filereader.addEventListener("load",function() {
var response=filereader.result;
$("#thumbnails").append("<img src="+response+"></div>");
},false);
}
};
oReq.onerror=function(e){
alert("error");
};
oReq.send();
}
})();
</script>
</head>
<body>
<div id="thumbnails"></div>
</body>
</html>

The FileReader API is asynchronous so you have to add a load handler and when triggered, then add the result:
var fileReader = new window.FileReader();
fileReader.onload = function() { // need load handler
var response=this.result;
$("#thumbnails").append("<img src="+response+"></div>");
};
fileReader.readAsDataURL(this.response);
I would in any case recommend to skip the conversion part. Using the blob directly not only saves memory, but is much faster. You just have to create the image element manually, for example:
oReq.onload = function(oEvent) {
if (this.status === 200) {
var img = new Image;
img.src = (URL || webkitURL).createObjectURL(this.response);
$("#thumbnails").append(img); // todo: append the </div> separately
}
};

Related

Accessing Vars In All Script Tags In HTML Source Fetched Via xhr Request

How would you access variable values from scripts tags in HTML source of a page fetched via xhr request.
HTML of fetched page...
<html>
<body>
<div id="somecontent"></div>
<script>
var foo="30";
</script>
<script>
var bar="60";
</script>
</body>
</html>
And fetched via xhr request...
var xhr = new XMLHttpRequest();
xhr.open("GET","http://www.example.com/testpage.html");
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
var html = xhr.responseText;
// try to access var
var result =html.foo+html.bar;
console.log(result);
}
}
xhr.send();
Any ideas would be greatly appreciated!
You can try something like that:
var xhr = new XMLHttpRequest();
xhr.open("GET","http://www.example.com/testpage.html");
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
var html = xhr.responseText;
var parser = new DOMParser();
var dom = parser.parseFromString(html, 'text/html');
var scripts = dom.querySelectorAll('script');
for (let script of scripts) {
eval(script.innerText);
}
console.log('foo', foo);
console.log('bar', bar);
}
}
xhr.send();

Can't figure out How to change the input file to an static folder file

I have a 'stolen' code here, which i want to change the input sector to a file in my folder on the server without uploading the file first. The problem is that I am a little bit bad in javascript to figure it out, how to change the code to do that. Thanks for any help.
<script src="jquery-2.1.4.min.js"></script>
<script lang="javascript" src="xlsx.full.min.js"></script>
<input type="file" id="input-excel" src="test.xslx"/>
<div id="wrapper">
</div>
<script>
$('#input-excel').change(function(e){
reader.readAsArrayBuffer(e.target.files[0]);
reader.onload = function(e) {
var data = new Uint8Array(reader.result);
var wb = XLSX.read(data,{type:'array'});
//var htmlstr = XLSX.write(wb,{sheet:"Kondensatoren", type:'binary',bookType:'html'});
var htmlstr = XLSX.write(wb,{sheet:"Tabelle1", type:'binary',bookType:'html'});
$('#wrapper')[0].innerHTML += htmlstr;
}
});
</script>
Your question is confusing, but here is how to use AJAX to request a file on your server without the person needing to upload the file first.
What you do with it is still up to you.
I notice it's a xslx file which isn't easily parsed like a CSV, so for your ajax request you will need to parse binary.
var oReq = new XMLHttpRequest();
oReq.open("GET", "test.xslx", true);
oReq.responseType = "arraybuffer";
oReq.onload = function(oEvent) {
var arrayBuffer = oReq.response;
// if you want to access the bytes:
var byteArray = new Uint8Array(arrayBuffer);
// ...
// create a new blob (change type to whatever)
var blob = new Blob(arrayBuffer, {type: "image/png"});
// whatever...
};
oReq.send();
Thx #Tallboy. Just for other newbies as me. The full code is.
<script src="jquery-2.1.4.min.js"></script>
<script lang="javascript" src="xlsx.full.min.js"></script>
<div id="wrapper"></div>
<script>
var oReq = new XMLHttpRequest();
oReq.open("GET", "test.xlsx", true);
oReq.responseType = "arraybuffer";
oReq.onload = function(oEvent) {
var arrayBuffer = oReq.response;
var data = new Uint8Array(arrayBuffer);
var wb = XLSX.read(data,{type:'array'});
var htmlstr = XLSX.write(wb,{sheet:"Kondensatoren", type:'binary',bookType:'html'});
$('#wrapper')[0].innerHTML += htmlstr;
};
oReq.send();
</script>

developing on the tizen device

This code is a part of my application, doesn't work on the tizen device while it work normally on the tizen simulator ... can anyone have a look and tell me why!! If it's a problem with the balise form or with the dom parser! Can anyone tell me how to solve it?
thx
<!DOCTYPE html>
<head>
</head>
<body>
<div id="result">
</div>
<div align="center">
<form name="myForm">
<button type="submit">go</button>
</form>
</div>
<script>
//var doc;
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://www.sntri.com.tn/html_ar/result_tarif_horaire_sntri.php', true);
//xhr.setRequestHeader('Origin', 'www.sntri.com.tn');
//xhr.setRequestHeader('Allow-Control-Allow-Origin', '*');
xhr.send();
xhr.onreadystatechange = function() {
if(4 === xhr.readyState) {
if(200 === xhr.status) {
var parser = new DOMParser();
var doc = parser.parseFromString(xhr.responseText, 'text/html');
var myForm = document.forms.myForm;
//console.log(doc);
var selectDep = doc.getElementsByName('code_arret_dep')[0];
var selectArr = doc.getElementsByName('code_arret_arr')[0];
doc.getElementBy
//console.log(select);
myForm.appendChild(selectDep);
myForm.appendChild(selectArr);
//console.log(xhr.responseText);
myForm.onsubmit = function(e) {
e.preventDefault();
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://www.sntri.com.tn/html_ar/result_tarif_horaire_sntri.php', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('code_arret_dep='+selectDep.value+'&code_arret_arr='+selectArr.value);
xhr.onreadystatechange = function() {
if(4 === xhr.readyState) {
if(200 === xhr.status) {
var parser = new DOMParser();
var doc = parser.parseFromString(xhr.responseText, 'text/html');
var result = document.getElementById('result');
var tablex = doc.getElementById('tablex');
//console.log(doc);
result.appendChild(tablex);
//console.log(xhr.responseText);
}
}
}
console.log(selectDep.value);
console.log(selectArr.value);
}
}
}
};
</script>
</body>
Do you add the internet privilege?
You can add the privilege in config.xml.
Open the config.xml on Tizen IDE.
Select the privileges tap.
Click the 'Add' button.
Select the http://tizen.org/privilege/internet
Run your application.

Call text file to populate paragraph in HTML - Is it possible?

Is it possible to call a text file similarily to how you would reference an image in a image tag? Similar to
<img src="http://link.to/image.png">
but
<p src="http://link.to/text.txt"></p>
?
Can you do this with javascript? Any advice would be super appreciated!
You can do this with XHR (XMLHttpRequest) . Pure Javascript:
<p id="text"></p>
<script>
text = document.getElementById('text');
xhr = new XMLHttpRequest();
xhr.open("GET", "http://link.to/file.txt");
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) //the readyState if the status of the request
text.innerHTML = xhr.responseText; // (http://www.w3schools.com/ajax/ajax_xmlhttprequest_onreadystatechange.asp)
// 4 is a completed request
}
</script>
Or, jQuery has the .load() function:
<p id="text"></p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$('#text').load('http://link.to/file.txt');
</script>
You can load the remote content via AJAX, as long as the remote server sends you proper CORS headers.
Something like this should work:
var $p = document.getElementsByTagName('p')[0];
var url = $p.getAttribute('src');
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function insertContents() {
if (xhr.readyState === 4 && xhr.status === 200) {
$p.innerHTML = xhr.responseText;
}
};
xhr.open('GET', url);
xhr.send();
possible with ajax
<p data-src="http://link.to/text.txt"></p>
JS:
$('p').each(function () {
var $this = $(this);
$.ajax({
url: $this.data('src'),
dataType: "text",
success: function (data) {
$this.html(data);
}
});
});
var client = new XMLHttpRequest();
client.open('GET', 'text.txt');
client.onreadystatechange = function() {
alert(client.responseText);
}
client.send();
You can display text file using IFrame. Like this-

Convert API request to text to use in site

I am trying to make an API request and put the return in a div.. What am I doing wrong?
<!DOCTYPE HTML>
<html>
<head>
<script>
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://data.mtgox.com/api/2/BTCUSD/money/ticker_fast?pretty", false);
xhr.send();
xhr = function() {
document.getElementById("myDiv").innerHTML=xhr.responseText;
}
</script>
</head>
<body>
<div id="myDiv"></div>
</body>
</html>
You need to bind onto the onload listener instead of setting a value to xhr:
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://data.mtgox.com/api/2/BTCUSD/money/ticker_fast?pretty", false);
xhr.onload = function() {
document.getElementById("myDiv").innerHTML=this.responseText;
};
xhr.send();
See the MDN docs on Using XMLHttpRequest.
You need
xhr.onload = function() { //onload
document.getElementById("myDiv").innerHTML=xhr.responseText;
}

Categories

Resources