|
| 1 | +<html> |
| 2 | +<head> |
| 3 | +<meta charset="utf-8" /> |
| 4 | +<script> |
| 5 | + |
| 6 | +if (!window.File || !window.FileReader || !window.FileList || !window.Blob) { |
| 7 | + alert("Your browser is too old to support HTML5 File API"); |
| 8 | +} |
| 9 | + |
| 10 | +function showImagePreview() { |
| 11 | + var demoImage = document.querySelector('img'); |
| 12 | + var file = document.querySelector('input[type=file]').files[0]; |
| 13 | + var reader = new FileReader(); |
| 14 | + reader.onload = function (event) { |
| 15 | + console.log(reader.result) |
| 16 | + demoImage.src = reader.result; |
| 17 | + } |
| 18 | + console.log(file) |
| 19 | + reader.readAsDataURL(file); |
| 20 | +} |
| 21 | + |
| 22 | +function uploadImageFile() { |
| 23 | + var req = new XMLHttpRequest(); |
| 24 | + req.onreadystatechange = function () { |
| 25 | + if (req.readyState==4) { |
| 26 | + console.log(req.responseText); |
| 27 | + listImageFiles(); |
| 28 | + } |
| 29 | + } |
| 30 | + url = '/api.php/records/categories'; |
| 31 | + req.open("POST", url); |
| 32 | + req.send(JSON.stringify({"name":"upload","icon":null})); |
| 33 | +} |
| 34 | + |
| 35 | +function listImageFiles() { |
| 36 | + var req = new XMLHttpRequest(); |
| 37 | + req.onreadystatechange = function () { |
| 38 | + if (req.readyState==4) { |
| 39 | + console.log(req.responseText); |
| 40 | + document.getElementById('output').innerHTML = JSON.stringify(JSON.parse(req.responseText), undefined, 4); |
| 41 | + } |
| 42 | + } |
| 43 | + url = '/api.php/records/categories'; |
| 44 | + req.open("GET", url); |
| 45 | + req.send(); |
| 46 | +} |
| 47 | +</script> |
| 48 | +</head> |
| 49 | +<body onload="listImageFiles()"> |
| 50 | + <pre id="output"></pre> |
| 51 | + <form onsubmit="uploadImageFile()"> |
| 52 | + <input type="file" onchange="showImagePreview()" accept="image/*"><br><br> |
| 53 | + <img src="" width="150" alt="Thumb preview..."> |
| 54 | + <input type="submit" value="Upload"> |
| 55 | + </form> |
| 56 | +</body> |
| 57 | +</html> |
0 commit comments