<!doctype html>
<html>
<head>
<title>Client Browsing - RJM Programming - June, 2019</title>
<script type='text/javascript'>
var rawdataurl='';
var x=0, y=0, lastx=0, lasty=0;
var elemLeft=0, elemTop=0;
var fs=[], filn='', file, lasttype='';
var elem=null, context;
var lastiw=0, lastih=0;
var sofar=" ";
var files=[], start, stop, reader=[];
var kij=0, imgo=[], kkij=0, blob=[];
var wo=null, wp1='', wp2='_blank';
var wid='', wis=0, his=0, wx=0, wy=0;
var ipre='<img style="display:inline-block;" id=gb src="', isuf='"></img>';
var apre=' <audio style="display:inline-block;" id=ab controls type="', amid='" src="', asuf='"></audio>';
var vpre=' <video style="display:inline-block;" id=vb controls type="', vmid='" src="', vsuf='"></video>';
var opre=' <iframe style="display:inline-block;" id=ib width="90%" height="90%" src="', osuf='"></iframe>';
var deviceWidth = window.orientation == 0 ? window.screen.height: window.screen.width;
var deviceHeight = window.orientation == 0 ? window.screen.width : window.screen.height;
var tnsize=64, mfiletype='image/jpeg', mfilename='';
var xx=[], yy=[], ixy=0, awis=[], ahis=[], awx=[], awy=[], awid=[], ten=10;
var isIE = (navigator.appName == 'Microsoft Internet Explorer' || (navigator.appName == "Netscape" && navigator.appVersion.indexOf('Edge') > -1));
var dsplus="Image";
var dsprefix="<details open><summary>"; // + dsplus
var dsmid="</summary>";
var dssuffix="<hr></details>";
if (isIE) {
dsprefix="<div style=vertical-align:top; id=divsummarytotalsimage style='display:inline-block;vertical-align:top;' onclick=\"document.getElementById('xx').style.display=document.getElementById(tdownright('xx')).style.display.replace('inline-block','no~ne').replace('none','inline-bl~ock').replace('~','');\"><span style='display:iNlInE-bLoCk;' id=rightimage>▶</span><span style='display:NoNe;' id=downimage>🔻</span> <DIV id=divshtimage style='display:inline-block;vertical-align:top;'><span id=summarytotalsimage>"; // + dsplus
dsmid="</span>";
dssuffix="</DIV><hr></div>";
}
function tdownright(inid) {
if (inid.substring(0,1) == 'g') {
document.getElementById('rightimage').style.display=document.getElementById('rightimage').style.display.toLowerCase().replace('inline-block','no~ne').replace('none','inline-bl~ock').replace('~',''); //'inline-block';
document.getElementById('downimage').style.display=document.getElementById('downimage').style.display.toLowerCase().replace('inline-block','no~ne').replace('none','inline-bl~ock').replace('~','');
} else if (inid.substring(0,1) == 'a') {
document.getElementById('rightaudio').style.display=document.getElementById('rightaudio').style.display.toLowerCase().replace('inline-block','no~ne').replace('none','inline-bl~ock').replace('~','');
document.getElementById('downaudio').style.display=document.getElementById('downaudio').style.display.toLowerCase().replace('inline-block','no~ne').replace('none','inline-bl~ock').replace('~','');
} else if (inid.substring(0,1) == 'v') {
document.getElementById('rightvideo').style.display=document.getElementById('rightvideo').style.display.toLowerCase().replace('inline-block','no~ne').replace('none','inline-bl~ock').replace('~','');
document.getElementById('downvideo').style.display=document.getElementById('downvideo').style.display.toLowerCase().replace('inline-block','no~ne').replace('none','inline-bl~ock').replace('~','');
} else if (inid.substring(0,1) == 'i') {
document.getElementById('rightother').style.display=document.getElementById('rightother').style.display.toLowerCase().replace('inline-block','no~ne').replace('none','inline-bl~ock').replace('~','');
document.getElementById('downother').style.display=document.getElementById('downother').style.display.toLowerCase().replace('inline-block','no~ne').replace('none','inline-bl~ock').replace('~','');
}
return inid;
}
function downright(inid) {
if (inid.substring(0,1) == 'g') {
document.getElementById('rightimage').style.display='inline-block';
document.getElementById('downimage').style.display='none';
} else if (inid.substring(0,1) == 'a') {
document.getElementById('rightaudio').style.display='inline-block';
document.getElementById('downaudio').style.display='none';
} else if (inid.substring(0,1) == 'v') {
document.getElementById('rightvideo').style.display='inline-block';
document.getElementById('downvideo').style.display='none';
} else if (inid.substring(0,1) == 'i') {
document.getElementById('rightother').style.display='inline-block';
document.getElementById('downother').style.display='none';
}
return inid;
}
function readBlob(opt_startByte, opt_stopByte) {
var blks=' ', variiuy=0, xssuffix='0', xnsuffix='2';
files = document.getElementById('files').files;
xx=[];
yy=[];
ten=500;
ixy=0;
awis=[];
ahis=[];
awx=[];
awy=[];
awid=[];
reader=[];
blob=[];
//imgo=[];
var ij=0;
kij=0;
kkij=0;
lastiw=0;
lastih=0;
if (!files.length) {
alert('Please select a file!');
return;
}
for (ij=0; ij<files.length; ij++) {
if (window.parent && files[ij].type.indexOf('image/') == 0) {
if (parent.document.getElementById('slideshow')) {
while (parent.document.getElementById('slideshow' + xssuffix.replace(/^0/g,'')).value != '') {
xssuffix='' + eval(0 + eval('' + xnsuffix));
xnsuffix='' + eval(1 + eval('' + xnsuffix));
}
parent.document.getElementById('slideshow' + xssuffix.replace(/^0/g,'')).value='' + files[ij].size + ' ';
parent.maybemore('' + files[ij].size + ' ', 'slideshow' + xnsuffix, parent.document.getElementById('slideshow' + xssuffix.replace(/^0/g,'')));
//alert('parent.maybemore("' + '' + files[ij].size + ' ' + ", 'slideshow' + xnsuffix + '" + ", 'slideshow" + xnsuffix + ', parent.document.getElementById("' + 'slideshow' + xssuffix.replace(/^0/g,'') + '"))');
}
}
}
for (ij=0; ij<files.length; ij++) {
file = files[ij];
filen = file.name;
lasttype = file.type;
fs.push(file.name.replace(/\\/g,'/').split('/')[eval(-1 + file.name.replace(/\\/g,'/').split('/').length)]);
start = parseInt(opt_startByte) || 0;
stop = parseInt(opt_stopByte) || file.size - 1;
//if (ij > 1) { alert('OK to continue'); }
reader.push(new FileReader());
// If we use onloadend, we need to check the readyState.
// Thanks to https://stackoverflow.com/questions/12546775/get-filename-after-filereader-asynchronously-loaded-a-file
reader[ij].onloadend = (function(mfile) {
return function(evt) {
var dp='', ds=dssuffix, slideshowparent=false, ssuffix='0', nsuffix='2', blnks=' ';
if (evt.target.readyState == FileReader.DONE) { // DONE == 2
slideshowparent=false;
ssuffix='0';
if (window.parent && mfile.type.indexOf('image/') == 0) {
if (parent.document.getElementById('slideshow')) {
parent.document.title+=' ' + mfile.size;
// maybemore(this.value, 'slideshow1', this);
while (parent.document.getElementById('slideshow' + ssuffix.replace(/^0/g,'')).value.replace('' + mfile.size + ' ','') != '') {
ssuffix='' + eval(0 + eval('' + nsuffix));
nsuffix='' + eval(1 + eval('' + nsuffix));
}
//parent.document.getElementById('slideshow' + ssuffix.replace(/^0/g,'')).value=' ';
parent.document.title+=':' + ssuffix;
parent.document.getElementById('slideshow' + ssuffix.replace(/^0/g,'')).value=evt.target.result.replace('data:;', 'data:' + mfile.type + ';').replace('data:application/octet-stream;', 'data:' + mfile.type + ';');
//parent.maybemore(evt.target.result.replace('data:;', 'data:' + mfile.type + ';').replace('data:application/octet-stream;', 'data:' + mfile.type + ';'), 'slideshow' + nsuffix, parent.document.getElementById('slideshow' + ssuffix.replace(/^0/g,'')));
slideshowparent=true;
}
}
if (!slideshowparent) {
if (mfile.type.indexOf('image/') == 0) {
if (document.getElementById('ibchkbox').checked) {
if (document.getElementById('gb')) {
document.getElementById('gb').src=evt.target.result.replace('data:;', 'data:' + mfile.type + ';');
document.getElementById('gb').style.display='inline-block';
if (document.getElementById('downimage')) {
document.getElementById('downimage').style.display='inline-block';
document.getElementById('rightimage').style.display='none';
} else {
document.getElementById('dtli').open=true;
}
} else if (document.getElementById('icontent').innerHTML == '') {
// var dsprefix="<details open><summary>"; // + dsplus
// var dsmid="</summary>";
// var dssuffix="</details>";
if (dsprefix.indexOf('image') != -1) {
dp='<hr>' + dsprefix.replace(/xx/g,'vb').replace(/image/g,'video') + 'Video' + dsmid + dssuffix;
dp+=dsprefix.replace(/xx/g,'ab').replace(/image/g,'audio') + 'Audio' + dsmid + dssuffix;
dp+=dsprefix.replace(/xx/g,'ib').replace(/image/g,'other') + 'Other' + dsmid + dssuffix;
dp+=dsprefix.replace('iNlInE-bLoCk','none').replace('NoNe','inline-block').replace(/xx/g,'gb') + 'Image' + dsmid;
} else {
dp=dsprefix.replace('><',' id=dtlv><') + 'Video ' + dsmid + dssuffix;
dp+=dsprefix.replace('><',' id=dtla><') + 'Audio ' + dsmid + dssuffix;
dp+=dsprefix.replace('><',' id=dtlo><') + 'Other ' + dsmid + dssuffix;
dp+=dsprefix.replace('><',' id=dtli><') + 'Image ' + dsmid;
}
document.getElementById('icontent').innerHTML+=dp + ipre + evt.target.result.replace('data:;', 'data:' + mfile.type + ';') + isuf + ds;
} else if (document.getElementById('dtli') || document.getElementById('divshtimage')) {
if (dsprefix.indexOf('image') != -1) {
if (document.getElementById('ab')) { document.getElementById(downright('ab')).style.display='none'; }
if (document.getElementById('vb')) { document.getElementById(downright('vb')).style.display='none'; }
if (document.getElementById('ib')) { document.getElementById(downright('ib')).style.display='none'; }
document.getElementById('divshtimage').innerHTML+=ipre + evt.target.result.replace('data:;', 'data:' + mfile.type + ';') + isuf;
tdownright('gb');
} else {
document.getElementById('dtla').open=false;
document.getElementById('dtlv').open=false;
document.getElementById('dtlo').open=false;
document.getElementById('dtli').open=true;
document.getElementById('dtli').innerHTML+=ipre + evt.target.result.replace('data:;', 'data:' + mfile.type + ';') + isuf;
}
} else {
document.getElementById('icontent').innerHTML+=ipre + evt.target.result.replace('data:;', 'data:' + mfile.type + ';') + isuf;
}
} else {
wo=window.open(wp1,wp2);
wo.document.write(ipre + evt.target.result.replace('data:;', 'data:' + mfile.type + ';') + isuf);
wo.document.title = mfile.name.replace(/\\/g,'/').split('/')[eval(-1 + mfile.name.replace(/\\/g,'/').split('/').length)];
}
} else if (mfile.type.indexOf('audio/') == 0) {
if (document.getElementById('ibchkbox').checked) {
if (document.getElementById('ab')) {
document.getElementById('ab').src=evt.target.result.replace('data:;', 'data:' + mfile.type + ';');
document.getElementById('ab').style.display='inline-block';
if (document.getElementById('downaudio')) {
document.getElementById('downaudio').style.display='inline-block';
document.getElementById('rightaudio').style.display='none';
} else {
document.getElementById('dtla').open=true;
}
} else if (document.getElementById('icontent').innerHTML == '') {
// var dsprefix="<details open><summary>"; // + dsplus
// var dsmid="</summary>";
// var dssuffix="</details>";
if (dsprefix.indexOf('image') != -1) {
dp='<hr>' + dsprefix.replace(/xx/g,'vb').replace(/image/g,'video') + 'Video' + dsmid + dssuffix;
dp+=dsprefix.replace(/xx/g,'gb') + 'Image' + dsmid + dssuffix;
dp+=dsprefix.replace(/xx/g,'ib').replace(/image/g,'other') + 'Other' + dsmid + dssuffix;
dp+=dsprefix.replace('iNlInE-bLoCk','none').replace('NoNe','inline-block').replace(/xx/g,'ab').replace(/image/g,'audio') + 'Audio' + dsmid;
} else {
dp=dsprefix.replace('><',' id=dtlv><') + 'Video ' + dsmid + dssuffix;
dp+=dsprefix.replace('><',' id=dtli><') + 'Image ' + dsmid + dssuffix;
dp+=dsprefix.replace('><',' id=dtlo><') + 'Other ' + dsmid + dssuffix;
dp+=dsprefix.replace('><',' id=dtla><') + 'Audio ' + dsmid;
}
document.getElementById('icontent').innerHTML+=dp + apre + mfile.type + amid + evt.target.result.replace('data:;', 'data:' + mfile.type + ';') + asuf.replace('><', ' id=v' + mfile.name + '><') + ds;
} else if (document.getElementById('dtla') || document.getElementById('divshtaudio')) {
if (dsprefix.indexOf('image') != -1) {
if (document.getElementById('gb')) { document.getElementById(downright('gb')).style.display='none'; }
if (document.getElementById('vb')) { document.getElementById(downright('vb')).style.display='none'; }
if (document.getElementById('ib')) { document.getElementById(downright('ib')).style.display='none'; }
document.getElementById('divshtaudio').innerHTML+=apre + mfile.type + amid + evt.target.result.replace('data:;', 'data:' + mfile.type + ';') + asuf.replace('><', ' id=v' + mfile.name + '><');
tdownright('ab');
} else {
document.getElementById('dtli').open=false;
document.getElementById('dtlv').open=false;
document.getElementById('dtlo').open=false;
document.getElementById('dtla').open=true;
document.getElementById('dtla').innerHTML+=apre + mfile.type + amid + evt.target.result.replace('data:;', 'data:' + mfile.type + ';') + asuf.replace('><', ' id=v' + mfile.name + '><');
}
} else {
document.getElementById('icontent').innerHTML+=apre + mfile.type + amid + evt.target.result.replace('data:;', 'data:' + mfile.type + ';') + asuf.replace('><', ' id=v' + mfile.name + '><');
}
} else {
wo=window.open(wp1,wp2);
wo.document.write(apre + mfile.type + amid + evt.target.result.replace('data:;', 'data:' + mfile.type + ';') + asuf.replace('><', ' id=a' + mfile.name + '><'));
wo.document.title = mfile.name.replace(/\\/g,'/').split('/')[eval(-1 + mfile.name.replace(/\\/g,'/').split('/').length)];
}
} else if (mfile.type.indexOf('video/') == 0) {
if (document.getElementById('ibchkbox').checked) {
if (document.getElementById('vb')) {
document.getElementById('vb').src=evt.target.result.replace('data:;', 'data:' + mfile.type + ';');
document.getElementById('vb').style.display='inline-block';
if (document.getElementById('downvideo')) {
document.getElementById('downvideo').style.display='inline-block';
document.getElementById('rightvideo').style.display='none';
} else {
document.getElementById('dtlv').open=true;
}
} else if (document.getElementById('icontent').innerHTML == '') {
// var dsprefix="<details open><summary>"; // + dsplus
// var dsmid="</summary>";
// var dssuffix="</details>";
if (dsprefix.indexOf('image') != -1) {
dp='<hr>' + dsprefix.replace(/xx/g,'ab').replace(/image/g,'audio') + 'Audio' + dsmid + dssuffix;
dp+=dsprefix.replace(/xx/g,'gb') + 'Image' + dsmid + dssuffix;
dp+=dsprefix.replace(/xx/g,'ib').replace(/image/g,'other') + 'Other' + dsmid + dssuffix;
dp+=dsprefix.replace('iNlInE-bLoCk','none').replace('NoNe','inline-block').replace(/xx/g,'vb').replace(/image/g,'video') + 'Video' + dsmid;
} else {
dp=dsprefix.replace('><',' id=dtli><') + 'Image ' + dsmid + dssuffix;
dp+=dsprefix.replace('><',' id=dtla><') + 'Audio ' + dsmid + dssuffix;
dp+=dsprefix.replace('><',' id=dtlo><') + 'Other ' + dsmid + dssuffix;
dp+=dsprefix.replace('><',' id=dtlv><') + 'Video ' + dsmid;
}
document.getElementById('icontent').innerHTML+=dp + vpre + mfile.type + vmid + evt.target.result.replace('data:;', 'data:' + mfile.type + ';') + vsuf.replace('><', ' id=v' + mfile.name + '><') + ds;
} else if (document.getElementById('dtlv') || document.getElementById('divshtvideo')) {
if (dsprefix.indexOf('image') != -1) {
if (document.getElementById('gb')) { document.getElementById(downright('gb')).style.display='none'; }
if (document.getElementById('ab')) { document.getElementById(downright('ab')).style.display='none'; }
if (document.getElementById('ib')) { document.getElementById(downright('ib')).style.display='none'; }
document.getElementById('divshtvideo').innerHTML+=vpre + mfile.type + vmid + evt.target.result.replace('data:;', 'data:' + mfile.type + ';') + vsuf.replace('><', ' id=v' + mfile.name + '><');
tdownright('vb');
} else {
document.getElementById('dtla').open=false;
document.getElementById('dtli').open=false;
document.getElementById('dtlo').open=false;
document.getElementById('dtlv').open=true;
document.getElementById('dtlv').innerHTML+=vpre + mfile.type + vmid + evt.target.result.replace('data:;', 'data:' + mfile.type + ';') + vsuf.replace('><', ' id=v' + mfile.name + '><');
}
} else {
document.getElementById('icontent').innerHTML+=vpre + mfile.type + vmid + evt.target.result.replace('data:;', 'data:' + mfile.type + ';') + vsuf.replace('><', ' id=v' + mfile.name + '><');
}
} else {
wo=window.open(wp1,wp2);
wo.document.write(vpre + mfile.type + vmid + evt.target.result.replace('data:;', 'data:' + mfile.type + ';') + vsuf.replace('><', ' id=v' + mfile.name + '><'));
wo.document.title = mfile.name.replace(/\\/g,'/').split('/')[eval(-1 + mfile.name.replace(/\\/g,'/').split('/').length)];
}
} else {
if (document.getElementById('ibchkbox').checked) {
if (document.getElementById('ib')) {
document.getElementById('ib').src=evt.target.result.replace('data:;', 'data:' + mfile.type + ';');
document.getElementById('ib').style.display='inline-block';
if (document.getElementById('downother')) {
document.getElementById('downother').style.display='inline-block';
document.getElementById('rightother').style.display='none';
} else {
document.getElementById('dtlo').open=true;
}
} else if (document.getElementById('icontent').innerHTML == '') {
// var dsprefix="<details open><summary>"; // + dsplus
// var dsmid="</summary>";
// var dssuffix="</details>";
if (dsprefix.indexOf('image') != -1) {
dp='<hr>' + dsprefix.replace(/xx/g,'ab').replace(/image/g,'audio') + 'Audio' + dsmid + dssuffix;
dp+=dsprefix.replace(/xx/g,'gb') + 'Image' + dsmid + dssuffix;
dp+=dsprefix.replace(/xx/g,'vb').replace(/image/g,'video') + 'Video' + dsmid + dssuffix;
dp+=dsprefix.replace('iNlInE-bLoCk','none').replace('NoNe','inline-block').replace(/xx/g,'ib').replace(/image/g,'other') + 'Other' + dsmid;
} else {
dp=dsprefix.replace('><',' id=dtlv><') + 'Video ' + dsmid + dssuffix;
dp+=dsprefix.replace('><',' id=dtla><') + 'Audio ' + dsmid + dssuffix;
dp+=dsprefix.replace('><',' id=dtli><') + 'Image ' + dsmid + dssuffix;
dp+=dsprefix.replace('><',' id=dtlo><') + 'Other ' + dsmid;
}
document.getElementById('icontent').innerHTML+=dp + opre + evt.target.result.replace('data:;', 'data:' + mfile.type + ';') + osuf + ds;
} else if (document.getElementById('dtlo') || document.getElementById('divshtother')) {
if (dsprefix.indexOf('image') != -1) {
if (document.getElementById('gb')) { document.getElementById(downright('gb')).style.display='none'; }
if (document.getElementById('ab')) { document.getElementById(downright('ab')).style.display='none'; }
if (document.getElementById('vb')) { document.getElementById(downright('vb')).style.display='none'; }
document.getElementById('divshtother').innerHTML+=opre + evt.target.result.replace('data:;', 'data:' + mfile.type + ';') + osuf;
tdownright('ib');
} else {
document.getElementById('dtla').open=false;
document.getElementById('dtlv').open=false;
document.getElementById('dtli').open=false;
document.getElementById('dtlo').open=true;
document.getElementById('dtlo').innerHTML+=opre + evt.target.result.replace('data:;', 'data:' + mfile.type + ';') + osuf;
}
} else {
document.getElementById('icontent').innerHTML+=opre + evt.target.result.replace('data:;', 'data:' + mfile.type + ';') + osuf;
}
} else {
wo=window.open(wp1,wp2);
wo.document.write(opre + evt.target.result.replace('data:;', 'data:' + mfile.type + ';') + osuf);
wo.document.title = mfile.name.replace(/\\/g,'/').split('/')[eval(-1 + mfile.name.replace(/\\/g,'/').split('/').length)];
}
}
}
} };
})(files[ij]);
blob.push(file.slice(start, stop + 1));
reader[ij].readAsDataURL(blob[ij]);
kij++;
// for (variiuy=0; variiuy<file.size; variiuy++) {
// blks+=' ';
// }
}
}
function onl() {
document.querySelector('.readBytesButtons').addEventListener('click', function(evt) {
if (evt.target.tagName.toLowerCase() == 'button') {
var startByte = evt.target.getAttribute('data-startbyte');
var endByte = evt.target.getAttribute('data-endbyte');
readBlob(startByte, endByte);
}
}, false);
}
</script>
</head>
<body style="background-color:#f0f0f0;" onload="onl();">
<h1>Client Browsing</h1>
<h3>RJM Programming - June, 2019</h3>
<input onclick="this.value=null;" onchange="document.getElementById('ibut').click();" style='width:50%;background-color:orange;' type="file" id="files" name="file" accept="image/*,video/*,audio/*,application/*,text/*" multiple /> Iframe Below <input type=checkbox id=ibchkbox></input> Rather Than New Window
<span class="readBytesButtons">
<button style='display:none;' data-startbyte="0" data-endbyte="4">1-5</button>
<button style='display:none;' data-startbyte="5" data-endbyte="14">6-15</button>
<button style='display:none;' data-startbyte="6" data-endbyte="7">7-8</button>
<button id=ibut style='background-color:pink;display:none;'>Send to Server Top Half</button>
</span>
<div style='display:none;' id="byte_range"></div>
<div style='display:none;' id="byte_content"></div>
<div id=icontent></div>
</body>
</html>