DIR : /home/kozerus/public_html/h5fil.html

/home/kozerus/public_html

<html>
<head>
	<title>h5fil 20200829_2230</title>
	</head>

<body bgcolor=linen>



<div id="drop_zone">Drop files here</div>
<output id="list"></output>

<script>
  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('list').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('drop_zone');
  dropZone.addEventListener('dragover', handleDragOver, false);
  dropZone.addEventListener('drop', handleFileSelect, false);
</script>

<hr><hr><hr>
	<style id="style_thumb" >
		.thumb {
			height: 75px;
			border: 1px solid #000;
			margin: 10px 5px 0 0;
			}
		</style>


<input type="file" id="files" name="files[]" multiple />

<script id="script_handlefileselect" >
  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('list').innerHTML = '<ul>' + output.join('') + '</ul>';
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);
	</script>



<hr><hr><hr>




<!--
<hr color=goldenrod>
<br><br><br><br>
<input type="file" id="files" name="files[]" multiple />
<output id="list"><h1>output_list_80</h1></output>
<br><br><br><br>
<hr color=goldenrod>
-->

	<script id="script_handlefileselect" >
		function handleFileSelect(evt) {
			var files = evt.target.files; // FileList object

// Loop through the FileList and render image files as thumbnails.
// Only process image files.
			for (var i = 0, f; f = files[i]; i++) {
				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('list').insertBefore(span, null);
        };
					})(f);

// Read in the image file as a data URL.
				reader.readAsDataURL(f);
				}
			}

		document.getElementById('files').addEventListener('change', handleFileSelect, false);
		</script>

<hr><hr><hr>

	<style id="style_byte_content" >
		#byte_content {
			margin: 5px 0;
			max-height: 100px;
			overflow-y: auto;
			overflow-x: hidden;
			}
		#byte_range { margin-top: 5px; }
		</style>


<!--
<input type="file" id="files" name="file" /> Read bytes: 
<span class="readBytesButtons">
  <button data-startbyte="0" data-endbyte="4">1-5</button>
  <button data-startbyte="5" data-endbyte="14">6-15</button>
  <button data-startbyte="6" data-endbyte="7">7-8</button>
  <button>entire file</button>
		</span>
	<div id="byte_range"></div>
	<div id="byte_content"></div>
	-->


	<style type="text/css">
		body {
			font-family: Arial;
			font-size: 10pt;
			}
		table {
			border: 1px solid #ccc;
			}
		table th {
			background-color: #F7F7F7;
			color: #333;
			font-weight: bold;
			}
		table th, table td {
			padding: 5px;
			border-color: #ccc;
			}
		</style>
	</head>


<body>
	<script type="text/javascript">
		function Upload() {
			var fileUpload = document.getElementById("fileUpload");
			var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.txt)$/;
			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(",");
							for (var j = 0; j < cells.length; j++) {
								var cell = row.insertCell(-1);
								cell.innerHTML = cells[j];
								}
							}
						var kocsv2js = document.getElementById("kocsv2js");
						kocsv2js.innerHTML = "";
						kocsv2js.appendChild(table);
						}
					reader.readAsText(fileUpload.files[0]);
					} 
				else {
					alert("kocsv2js warn:  unauthorized access noted");
					}
				} 
			else {
				alert("kocsv2js fail:  unsuppoted format");
				}
			}
		</script>


	<input type="file" id="fileUpload" />
	<input type="button" id="upload" value="Upload" onclick = "Upload()" />


	<hr />
	<div id="kocsv2js">
		</div>




	</body>
	</html>
//


koh5_pano



Your browser does not support the HTML5 canvas element.
Drag mouse to navigate.

Navigation





17.Aug.2010, Martin Wengenmayer