|
8 | 8 | } |
9 | 9 |
|
10 | 10 | function showImagePreview() { |
11 | | - var demoImage = document.querySelector('img'); |
| 11 | + var demoImage = document.querySelector('img#preview'); |
12 | 12 | var file = document.querySelector('input[type=file]').files[0]; |
13 | 13 | var reader = new FileReader(); |
14 | 14 | reader.onload = function (event) { |
|
20 | 20 | } |
21 | 21 |
|
22 | 22 | function uploadImageFile() { |
| 23 | + var demoImage = document.querySelector('img#preview'); |
23 | 24 | var req = new XMLHttpRequest(); |
24 | 25 | req.onreadystatechange = function () { |
25 | 26 | if (req.readyState==4) { |
|
29 | 30 | } |
30 | 31 | url = '/api.php/records/categories'; |
31 | 32 | req.open("POST", url); |
32 | | - req.send(JSON.stringify({"name":"upload","icon":null})); |
| 33 | + var icon = demoImage.src.split(";")[1].split(",")[1]; |
| 34 | + req.send(JSON.stringify({"name":"upload","icon":icon})); |
33 | 35 | } |
34 | 36 |
|
35 | 37 | function listImageFiles() { |
| 38 | + var ul = document.querySelector('ul'); |
36 | 39 | var req = new XMLHttpRequest(); |
37 | 40 | req.onreadystatechange = function () { |
38 | 41 | if (req.readyState==4) { |
39 | 42 | console.log(req.responseText); |
40 | | - document.getElementById('output').innerHTML = JSON.stringify(JSON.parse(req.responseText), undefined, 4); |
| 43 | + output.innerHTML = ""; |
| 44 | + var categories = JSON.parse(req.responseText).records; |
| 45 | + for (var i=0;i<categories.length;i++) { |
| 46 | + var li = document.createElement('li'); |
| 47 | + var img = document.createElement('img'); |
| 48 | + var span = document.createElement('span'); |
| 49 | + img.style = 'height:2em;margin:0 .5em;'; |
| 50 | + img.src = "data:image/png;base64," + categories[i].icon; |
| 51 | + span.innerHTML = categories[i].name; |
| 52 | + li.appendChild(img); |
| 53 | + li.appendChild(span); |
| 54 | + ul.appendChild(li); |
| 55 | + } |
41 | 56 | } |
42 | 57 | } |
43 | 58 | url = '/api.php/records/categories'; |
|
47 | 62 | </script> |
48 | 63 | </head> |
49 | 64 | <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"> |
| 65 | + <ul id="output"></ul> |
| 66 | + <hr> |
| 67 | + <form onsubmit="uploadImageFile(); return false;"> |
| 68 | + <img src="" id="preview" style="height:2em;margin:0 .5em;" alt="PNG preview..."><br><br> |
| 69 | + <input type="file" onchange="showImagePreview()" accept="image/png"><br><br> |
| 70 | + <input type="submit" value="Upload PNG"> |
55 | 71 | </form> |
56 | 72 | </body> |
57 | 73 | </html> |
0 commit comments