+ 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

html images

14th Sep 2020, 10:39 AM

Sourav Parik

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

14th Sep 2020, 8:51 PM

Josh Greig