TC
/
QuickSend


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202
							<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<title>QuickSend Image</title>
<link rel="stylesheet" href="tocas.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.qrcode.min.js"></script>
</head>

<body>
<div class="ts inverted heading fluid slate" style="background-color:#2c2835;color:white;">
    <span class="large header">Quick Send System</span>
    <span class="description">Send data between mobile and laptops.<br> Powered by IMUS Laboratory</span>
    <div class="ts bottom attached tabbed menu" style="color:white;">
        <a class="item" href="index.php" style="color:#9d9ca3;">Send</a>
        <a class="item" href="rx.php" style="color:#9d9ca3;">Receive</a>
        <a class="active item" href="img.php">Image</a>
        <a class="item" href="file.php" style="color:#9d9ca3;">Files</a>
    </div>
</div>
<br><br>
<div class="ts container">
<div class="ts stackable centered grid">
	 <div class="six wide column" align="center" style="overflow:hidden;">
		<div class="ts fluid steps">
			<div class="step">
				<div class="content">
					<div class="title">Step 1</div>
					<div class="description">Select your image to send</div>
				</div>
			</div>
		</div>
	 
		<input class="ts button" id="inp" type='file' style="width:100%;"><br>
		<button class="ts basic fluid negative button" onclick="clearselection()">Clear</button>
		<div class="ts narrow container" style="">
			<p id="b64"></p>
			<img id="img" src='img/noimg.png' height="150">
		</div>
		
	 </div>
	 <div class="five wide column" align="center">
	 <div class="ts fluid steps">
			<div class="step">
				<div class="content">
					<div class="title">Step 2</div>
					<div class="description">Generate the sender QR Code</div>
				</div>
			</div>
		</div>
	 
		<div class="ts inverted segment">
			<div class="ts tiny inverted statistics">
				<div class="statistic">
					<div class="value" id="width">N/A</div>
					<div class="label">Image Width</div>
				</div>
				<div class="statistic">
					<div class="value" id="height">N/A</div>
					<div class="label">Image Height</div>
				</div>
				<div class="statistic">
					<div class="value" id="size">N/A</div>
					<div class="label">Storage Size</div>
				</div>
			</div>
		</div>
		<button class="ts basic fluid button" onclick="senddata()">Generate QR Code</button>
	 
	 </div>
	 <div class="five wide column" align="center">
		<div class="ts fluid steps">
			<div class="step">
				<div class="content">
					<div class="title">Step 3</div>
					<div class="description">Use the QR Code to receive the image.</div>
				</div>
			</div>
		</div>
		
		<div id="output"></div>
		<div class="ts small statistic">
		<div class="label">QuickSend ID</div>
		<div class="value" id="sid"><?php
		$max = 0;
		foreach (new DirectoryIterator('Memo/') as $fileInfo) {
			if ($fileInfo->isDot()) continue;
			$current = pathinfo($fileInfo->getFilename())['filename'];
			if (!is_numeric($current)) continue;
			if ($current > $max) $max = $current;
		}
		echo $max+1;
		?></div>
		</div>
	 </div>

</div>
<div class="ts fluid input" style="display:none;">
    <div class="ts input" style="width: 100%;height:250px">
    <textarea id="base64" placeholder="Encoded Base64 Content..."></textarea>
	</div>
</div>
<div class="ts segment">
	<div class="ts grid" align="center">
		<div class="six wide column">
		
		</div>
		<div class="ten wide column">
		
		
		</div>
	</div>
</div>
<br><br><br><br><br><br>


<div style="position: fixed;
    z-index: 100; 
    bottom: 0; 
    left: 0;
    width: 100%;
	background-color:#2c2835;
	color:white;">
<div class="ts container">
<img class="ts tiny right floated image" src="img/cube.png"></img>
</div>
<div align="left" class="ts container">
<br>
CopyRight IMUS Laboratory 2021, All right reserved.
</div>
</div>
<script>

function clearselection(){
	$("#base64").val('');
	document.getElementById("img").src       = 'img/noimg.png';
	$("#inp").val("");
	$("#width").text("Null");
	$("#height").text("Null");
	$("#size").text("Null");
}

function bytesToSize(bytes) {
   var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
   if (bytes == 0) return '0 Byte';
   var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
   return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i];
};

function readFile() {
  
  if (this.files && this.files[0]) {
    
    var FR= new FileReader();
    
    FR.addEventListener("load", function(e) {
      document.getElementById("img").src       = e.target.result;
      $("#base64").val(e.target.result);
	  var i = new Image();
	  i.src = document.getElementById("img").src;
	  i.onload = function(){
	  console.log(i.width);
	  $("#width").text(i.width + "px");
	  console.log(i.height);
	  $("#height").text(i.height+ "px");
	  $("#size").text(bytesToSize(encodeURI(e.target.result).split(/%..|./).length - 1));
	  }
    }); 
    
    FR.readAsDataURL( this.files[0] );
  }
  
}

jQuery(function(){
	jQuery('#output').qrcode("Hello World");
})

function senddata(){
	textarea = $('#base64').val();
	if (textarea != ""){
    $.ajax({
        type: "POST",
        url: "StickMemo.php",
        data:{ content: textarea }, 
        success: function(data){
            //alert(data);
			$("#output").empty();
			jQuery('#output').qrcode("http://imuslab.com/qs/display.php?id=" + data);
			$("#sid").html(data);
        }
    })
	

	}}


document.getElementById("inp").addEventListener("change", readFile);
</script>
</body>
</html>