mirror of
https://github.com/Fluffy-Bean/image-gallery.git
synced 2025-07-15 14:16:12 +00:00
Image preview on upload
This commit is contained in:
parent
37b1f94575
commit
3110858151
3 changed files with 31 additions and 0 deletions
11
upload.php
11
upload.php
|
@ -27,6 +27,7 @@
|
|||
<div class="upload-root">
|
||||
<h2>Upload image</h2>
|
||||
<p>In this world you have 2 choices, to upload a really cute picture of an animal or fursuit, or something other than those 2 things.</p>
|
||||
<img id="imagePreview" src="">
|
||||
<br>
|
||||
<form id="uploadSubmit" class="flex-down between" method="POST" enctype="multipart/form-data">
|
||||
<input id="image" class="btn btn-neutral" type="file" placeholder="select image UwU">
|
||||
|
@ -36,6 +37,16 @@
|
|||
<br>
|
||||
<button id="submit" class="btn btn-good" type="submit"><img class="svg" src="assets/icons/upload.svg">Upload Image</button>
|
||||
</form>
|
||||
<script>
|
||||
image.onchange = evt => {
|
||||
const [file] = image.files
|
||||
if (file) {
|
||||
imagePreview.src = URL.createObjectURL(file);
|
||||
} else {
|
||||
imagePreview.src = "assets/no_image.png";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue