oychao/_front end scripts.md

## _front end scripts.md

      
    Raw
  

              _front end scripts.md
            
          
    frontend html5 demos


## basic_usage.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <button id="btnRecord">download</button>
  <script type="text/javascript">
    // Create a file with Blob and download it.
    const inputFile = document.querySelector('#inputFile');

    btnRecord.addEventListener('click', function(e) {
      const blob = new Blob(['this is just a test'], {
        type: 'text/plain'
      });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.style.display = 'none';
      a.href = url;
      a.download = 'test.txt';
      document.body.append(a);
      a.click();
      setTimeout(function() {
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
      }, 0);
    });
  </script>
</body>
</html>

## select_image.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <input id="inputFile" type="file" accept="image/*">
  <br>
  <img id="img">
  <script type="text/javascript">
    // Select a local img file and display it.
    const img = document.querySelector('#img');
    const inputFile = document.querySelector('#inputFile');

    inputFile.addEventListener('change', function(e) {
      const file = inputFile.files[0];
      if (file) {
        const url = URL.createObjectURL(file);
        img.src = url;
      }
    });
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	</head>
	<body>
	<button id="btnRecord">download</button>
	<script type="text/javascript">
	// Create a file with Blob and download it.
	const inputFile = document.querySelector('#inputFile');

	btnRecord.addEventListener('click', function(e) {
	const blob = new Blob(['this is just a test'], {
	type: 'text/plain'
	});
	const url = URL.createObjectURL(blob);
	const a = document.createElement('a');
	a.style.display = 'none';
	a.href = url;
	a.download = 'test.txt';
	document.body.append(a);
	a.click();
	setTimeout(function() {
	document.body.removeChild(a);
	URL.revokeObjectURL(url);
	}, 0);
	});
	</script>
	</body>
	</html>