New course! Every coder should learn Generative AI!
Try a free lesson+ 1
How do I allow image upload?
I tried using <input type="file" accept="image/*"> but it just displays the file name Full code: https://code.sololearn.com/Wi54FHPZuLcB/#html
1 Answer
+ 2
I adjusted your code to preview the selected image immediately in the browser without actually uploading to a server. The other controls then work with that selected image. After you run, remember to select an image first.
Here's the updated HTML. Notice the extra id="image-file" and img id="image".
<!doctype html>
<html lang="en">
<head>
</head>
<body>
<input id="image-file" type="file" accept="image/*" onchange="previewImage()">
<h4>Border-Radius: <span id="borderadii"></span></h4>
<input oninput="radius()" class="slider" type="range" min="0" max="50" value="0" id="borderadius"><br>
<h4>GrayScale: <span id="grayness"></span></h4>
<input oninput="gray()" type="range" min="0" max="100" value="0" id="grayscale">
<img id="image" src=""/>
</body>
</html>
Here is the updated JavaScript:
function radius() {
var bradius = document.getElementById("borderadius").value;
document.getElementById("image").style.borderRadius = bradius + "%";
document.getElementById("borderadii").innerHTML = bradius + "%";
}
function gray() {
var gscale = document.getElementById("grayscale").value + "%";
document.getElementById("image").style.filter = "grayscale(" + gscale + ")";
document.getElementById("grayness").innerHTML = gscale;
}
function previewImage()
{
var input = document.getElementById('image-file');
if (input && input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
document.getElementById('image').setAttribute('src', e.target.result);
}
reader.readAsDataURL(input.files[0]); // convert to base64 string
}
}
I adapted part of the changes from: https://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded
Often have questions like this?
Learn more efficiently, for free:
Hot today
[SOLVED] Ballpark Challenge
1 Votes
HELP. UNFAIR STREAK LOSS
2 Votes
There is an error.
0 Votes
Who will
0 Votes