DIR : /home/kozerus/public_html/files0.html
/home/kozerus/public_html
<html>
<head>
<title>-= files.html =- FILES -= 20190213_1900 =-</title>
</head>
<body>
<div id="div_files" >
<output id="zonelist"></output>
<div id="dropzone">
dropzone
<div id="div_canvas" style="position:relative; width:400px; height:200px background:white">
<canvas id="canvas_dropzone" style="z-index: 1;
position:absolute;
left:0px;
top:0px;
" height="100px" width="200" background-color="darkSlategrey" color="ivory">
WARN_1387 unauthorized access has been logged
</canvas>
</div>
<script name="script_fileselect">
function handleFileSelect(evt) {
evt.stopPropagation();
evt.preventDefault();
var files = evt.dataTransfer.files; // FileList object.
// files is a FileList of File objects. List some properties.
var output = [];
for (var i = 0, f; f = files[i]; i++) {
output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
f.size, ' bytes, last modified: ',
f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
'</li>');
}
document.getElementById('zonelist').innerHTML = '<ul>' + output.join('') + '</ul>';
}
function handleDragOver(evt) {
evt.stopPropagation();
evt.preventDefault();
evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
}
// Setup the dnd listeners.
var dropZone = document.getElementById('dropzone');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleFileSelect, false);
</script>
<hr><hr><hr>
<label class="fileContainer">
files
<input id="files" name="files[]" multiple="" type="file">
</label>
<output id="zonelist"></output>
<script>
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
// files is a FileList of File objects. List some properties.
var output = [];
for (var i = 0, f; f = files[i]; i++) {
output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
f.size, ' bytes, last modified: ',
f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
'</li>');
}
document.getElementById('zonelist').innerHTML = '<ul>' + output.join('') + '</ul>';
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
<div id="div_files2" hidden >
<label class="fileContainer">
files2
<input id="files" name="files[]" multiple="" type="file">
</label>
<output id="zonelist"></output>
</div>
<script>
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {
// Only process image files.
if (!f.type.match('image.*')) { continue; }
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
// Render thumbnail.
var span = document.createElement('span');
span.innerHTML = ['<img class="thumb" src="', e.target.result,
'" title="', escape(theFile.name), '"/>'].join('');
document.getElementById('zonelist').insertBefore(span, null);
};
})(f);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
<script id="script_previewfile">
function previewfile(file) {
if (tests.filereader === true && acceptedTypes[file.type] === true) {
var reader = new FileReader();
reader.onload = function (event) {
var image = new Image();
image.src = event.target.result;
image.width = 250; // a fake resize
holder.appendChild(image);
};
reader.readAsDataURL(file);
}
else {
holder.innerHTML +=
'<p>done: koupload'
+ file.name
+ ' '
+ (file.size ? (file.size/1024|0) + 'K' : '');
console.log(file);
}
}
function readfiles(files) {
debugger;
var formData = tests.formdata ? new FormData() : null;
for (var i = 0; i < files.length; i++) {
if (tests.formdata) formData.append('file', files[i]);
previewfile(files[i]);
}
// now post a new XHR request
if (tests.formdata) {
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://ka6/ko/bin/php/ko.php?ko=ajax,upload,filenames,phpi,ok');
// xhr.open('POST', 'ka6/ko/bin/php/index.php?q=upload,filenames');
xhr.onload = function() {
progress.value = progress.innerHTML = 100;
};
if (tests.progress) {
xhr.upload.onprogress = function (event) {
if (event.lengthComputable) {
var complete = (event.loaded / event.total * 100 | 0);
progress.value = progress.innerHTML = complete;
}
}
}
xhr.send(formData);
}
}
if (tests.dnd) {
holder.ondragover = function () { this.className = 'hover'; return false; };
holder.ondragend = function () { this.className = ''; return false; };
holder.ondrop = function (e) {
this.className = '';
e.preventDefault();
readfiles(e.dataTransfer.files);
}
}
else {
fileupload.className = 'hidden';
fileupload.querySelector('input').onchange = function () {
readfiles(this.files);
};
}
</script>
<script id="script_myfilework>
funtion myfilework( j, file ) {
alert( j+" file="+file );
}
</script>
<script id="script_upload_input">>
var upload = document.getElementsByTagName('input')[0],
holder2 = document.getElementById('holder2'),
state = document.getElementById('status');
if (typeof window.FileReader === 'undefined') {
state.className = 'fail';
}
else {
state.className = 'success';
state.innerHTML = 'File API & FileReader available';
}
upload.onchange = function (e) {
e.preventDefault();
var file = upload.files[0],
reader = new FileReader();
reader.onload = function (event) {
var img = new Image();
img.src = event.target.result;
// note: no onload required since we've got the dataurl...I think! :)
if (img.width > 560) { // holder width
img.width = 560;
}
holder2.innerHTML = '';
holder.appendChild(img);
};
reader.readAsDataURL(file);
return false;
};
// var formData = new FormData();
// formData.append("part_num", "123ABC");
// formData.append("part_price", 7.95);
// formData.append("part_image", somefile)
//
// var xhr = new XMLHttpRequest();
// xhr.open("POST", "http://ka6/ko/bin/php/ko.php?ko=ajax,upload/");
// xhr.send(formData);
</script>
<canvas color="darkSlategrey" height="100" width="400"></canvas>
<script>
var canvas = document.getElementsByTagName('canvas')[0],
ctx = null,
grad = null,
body = document.getElementsByTagName('body')[0],
color = 255;
color = lightblue;
if (canvas.getContext('2d')) {
ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, 600, 600);
ctx.save();
// Create radial gradient
// grad = ctx.createRadialGradient(0,0,0,0,0,600);
// grad.addColorStop(0, '#000');
// grad.addColorStop(1, 'rgb(' + color + ', ' + color + ', ' + color + ')');
// assign gradients to fill
// ctx.fillStyle = grad;
ctx.fillstyle = "lightblue";
// draw 600x600 fill
ctx.fillRect(0,0,600,600);
ctx.save();
body.onmousemove = function (event) {
var width = window.innerWidth,
height = window.innerHeight,
x = event.clientX,
y = event.clientY,
rx = 600 * x / width,
ry = 600 * y / height;
var xc = ~~(256 * x / width);
var yc = ~~(256 * y / height);
grad = ctx.createRadialGradient(rx, ry, 0, rx, ry, 600);
grad.addColorStop(0, '#000');
grad.addColorStop(1, ['rgb(', xc, ', ', (255 - xc), ', ', yc, ')'].join(''));
// ctx.restore();
// ctx.fillStyle = grad;
ctx.fillstyle="lightblue";
ctx.fillRect(0,0,600,600);
// ctx.save();
};
}
</script>
<div id="div_csv"><h3></h3></div>
<script id="script_upload" type="text/javascript">
// function upload_csv() {
function Upload() {
// var files = evt.dataTransfer.files; // FileList object.
// var fileUpload = document.getElementById("upload_files");
var fileUpload = document.getElementById("fileUpload");
var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.txt|.psv|.py|.htm|.html|.php)$/;
// if (regex.test(fileUpload.value.toLowerCase())) {
if (regex.test(fileUpload.value.toLowerCase())) {
if (typeof (FileReader) != "undefined") {
var reader = new FileReader();
reader.onload = function (e) {
var table = document.createElement("table");
var rows = e.target.result.split("\n");
for (var i = 0; i < rows.length; i++) {
var row = table.insertRow(-1);
// var cells = rows[i].split("|");
var cells = rows[i].split(",");
for (var j = 0; j < cells.length; j++) {
var cell = row.insertCell(-1);
cell.innerHTML = cells[j];
}
}
var csv2tbl = document.getElementById("csv2tbl");
csv2tbl.innerHTML = "";
csv2tbl.appendChild(table);
}
reader.readAsText(fileUpload.files[0]);
file_csv=fileUpload.files[0];
file_csvlen = fileUpload.files.length;
alert( "BUGS_4390 CSV file_csvlen="+file_csvlen+" file_csv="+file_csv );
load_file_csv(file_csv);
}
else {
alert("csv2tbl warn: unauthorized access noted");
}
}
else {
alert("csv2tbl fail: unsuppoted format");
}
}
</script>
<script id="script_load_file_csv">
function load_file_csv(file_csv) {
alert( "BUGS_4400 load_file_csv file_csv="+file_csv" );
file_psv=file_csv;
return(file_psv);
}
</script>
<label class="fileContainer">
files.csv.psv.txt
<input id="fileUpload" type="file"></input>
</label>
     
<label class="fileContainer">
parse.csv.psv.txt
<input id="upload" value="Upload" onclick="Upload()" type="button"></input>
</label>
<div id="csv2tbl"><h3>csv2tbl</h3></div>
<script type="text/javascript">
$(function() {
// grab the file input and bind a change event onto it
$('#file').bind("change", function() {
// new html5 formdata object.
var formData = new FormData();
// for each entry, add to formdata to later access via $_FILES["file" + i]
for (var i = 0, len = document.getElementById('file').files.length; i < len; i++) {
formData.append("file" + i, document.getElementById('file').files[i]);
}
//send formdata to server-side
$.ajax({
// url: "file-upload.php", // our php file
// url: "ka1_fileupload.php", // our php file
// nurl: "http://ka1/ka1.php?q=up", // our php file
// url: "/kup.php", // our php file
// url: "/ka1_up.php", // our php file
// url: "/ka1.php?q=kup", // our php file
// url: "/ko0.php?q=kup", // our php file
// url: "/ko1.php?q=kup", // our php file
url: "/ko2.php?q=kup", // our php file
// bugs url: "10.0.0.112:/ka1.php?q=up", // our php file
type: 'post',
data: formData,
dataType: 'html', // we return html from our php file
async: true,
processData: false, // tell jQuery not to process the data
contentType: false, // tell jQuery not to set contentType
success : function(data) {
$('#upload-result').append('<div class="alert alert-success"><p>File(s) uploaded successfully!</p><br />');
$('#upload-result .alert').append(data);
},
error : function(request) {
console.log(request.responseText);
}
});
});
});
</script>
<hr color=white>
<hr color=black>
<div id='editableDiv' contenteditable='true'>paste</div>
<hr color=black>
<hr color=white>
<hr color=black>
<div id='div' contenteditable='true'>ffpaste</div>
<hr color=black>
<hr color=white>
<script id="script_clipboard" >
function handlePaste (e) {
var clipboardData, pastedData;
// Stop data actually being pasted into div
e.stopPropagation();
e.preventDefault();
// Get pasted data via clipboard API
clipboardData = e.clipboardData || window.clipboardData;
pastedData = clipboardData.getData('Text');
// Do whatever with pasteddata
alert(pastedData);
}
document.getElementById('editableDiv').addEventListener('paste', handlePaste);
</script>
<script id="script_clipboard_ff" >
function handlepaste_ff (e) {
var types, pastedData, savedContent;
// Browsers that support the 'text/html' type in the Clipboard API (Chrome, Firefox 22+)
if (e && e.clipboardData && e.clipboardData.types && e.clipboardData.getData) {
// Check for 'text/html' in types list. See abligh's answer below for deatils on
// why the DOMStringList bit is needed. We cannot fall back to 'text/plain' as
// Safari/Edge don't advertise HTML data even if it is available
types = e.clipboardData.types;
if (((types instanceof DOMStringList) && types.contains("text/html")) || (types.indexOf && types.indexOf('text/html') !== -1)) {
// Extract data and pass it to callback
pastedData = e.clipboardData.getData('text/html');
// processPaste(editableDiv, pastedData);
processPaste_ff(editableDiv, pastedData);
// Stop the data from actually being pasted
e.stopPropagation();
e.preventDefault();
return false;
}
}
// Everything else: Move existing element contents to a DocumentFragment for safekeeping
savedContent = document.createDocumentFragment();
while(editableDiv.childNodes.length > 0) {
savedContent.appendChild(editableDiv.childNodes[0]);
}
// Then wait for browser to paste content into it and cleanup
waitForPastedData(editableDiv, savedContent);
return true;
}
function waitForPastedData (elem, savedContent) {
// If data has been processes by browser, process it
if (elem.childNodes && elem.childNodes.length > 0) {
// Retrieve pasted content via innerHTML
// (Alternatively loop through elem.childNodes or elem.getElementsByTagName here)
var pastedData = elem.innerHTML;
// Restore saved content
elem.innerHTML = "";
elem.appendChild(savedContent);
// Call callback
processPaste_ff(elem, pastedData);
}
// Else wait 20ms and try again
else {
setTimeout(function () {
waitForPastedData(elem, savedContent)
}, 20);
}
}
function processPaste_ff (elem, pastedData) {
// Do whatever with gathered data;
alert(pastedData);
elem.focus();
}
// Modern browsers. Note: 3rd argument is required for Firefox <= 6
if (editableDiv.addEventListener) {
editableDiv.addEventListener('paste', handlepaste, false);
}
// IE <= 8
else {
editableDiv.attachEvent('onpaste', handlepaste);
}
$(document).on('paste','[contenteditable]',function(e) {
e.preventDefault();
var text = (e.originalEvent || e).clipboardData.getData('text/plain');
window.document.execCommand('insertText', false, text);
});
</script>
<script id="script_clipboard_jskit" >
function getSelectionText(){
var selectedText = ""
if (window.getSelection){ // all modern browsers and IE9+
selectedText = window.getSelection().toString()
}
return selectedText
}
document.addEventListener('mouseup', function(){
var thetext = getSelectionText()
if (thetext.length > 0){ // check there's some text selected
console.log(thetext) // logs whatever textual content the user has selected on the page
}
}, false)
function copySelectionText(){
var copysuccess // var to check whether execCommand successfully executed
try{
copysuccess = document.execCommand("copy") // run command to copy selected text to clipboard
}
catch(e){
copysuccess = false
}
return copysuccess
}
</script>
</body>
</html>
//
koh5_pano
Drag mouse to navigate.
Navigation
- Left/Right Mouse drag: Changes camera heading.
- Up/Sown Mouse drag: Changes camera pitch.
- Scroll wheel: Changes camera field of view.
- I-Key: Displays Info panel with canvas size, image size and FPS.
17.Aug.2010, Martin Wengenmayer