Can I Make Image Upload In Frontend Website? [duplicate]

I Wrote This Code To Make An Image Input & output:

  • Html :
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Upload Image</title>
    <link rel="stylesheet" href="Style.css">
</head>
<body>
    <h1>Click Button To Add Image</h1>
    <input type="file" id="imageInput" accept="image/*" name="imageinput">
    <button id="Return">Return Image</button><br>
    <img src="" alt="" id="MyImage" height="200px" width="200px">
</body>
</html>
  • javaScript :
document.getElementById("Return").onclick = function() {
    document.getElementById("MyImage").src = document.getElementById("imageInput").value;
}

But When I Run My Website :

My Website

  1. I click اختيار الملف (Upload File in English Because I Use Arabic).
  2. I Choose Any Image.
  3. I Click the Return Button.
  4. Nothing Happens!

My Teacher Tells Me that it works only on backend coding, But when I tried PHP, I Wrote Some Code And It shows My Written Code!

PHP