Last active
December 11, 2018 04:39
-
-
Save oychao/e466ffb968b117572223add5da6a019b to your computer and use it in GitHub Desktop.
frontend html5 demos
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment