How to make image to behave like file input?

Asked 14/9, 2018 at 14:39 Answered 30/11, 2020 at 20:35

Solved javascript html css function click

When the default photo is clicked it should make a user to select a file from his computer other than making an input type = "file" that makes the user to first click on browse button than select a file. A user should directly click on default photo and a file selection window should appear.

<html lang = "en">
    <head>
        <title>
            Profile Click
        </title>
        <style>
            #file{
                display: none;
            }
        </style>
    </head>
    <body>
        <script>
            function pro1(){
                document.prolis.getElementById("image") = document.prolis.getElementById("file");
            }
        </script>
        <form name = "prolis">
        <img src = "index.jpg" id = "image" onclick = "pro1()";>
        <input type = "file" id = "file">
    </body>
</html>
Mozilla Firefox console shows "TypeError: document.prolis.getElementById is not a function".

How should I make this function work? This is my default image:

Expressivity answered 14/9, 2018 at 14:39 Comment(1)

window.prolis – Oma 14/9, 2018 at 14:43

To make the image behave like an input file element, you can just call the input file .click() method when you click on the img.

This is how should be your code:

function pro1(){
   document.getElementById("file").click();
}

Demo:

<html lang = "en">
    <head>
        <title>
            Profile Click
        </title>
        <style>
            #file{
                display: none;
            }
        </style>
    </head>
    <body>
        <script>
            function pro1(){
                document.getElementById("file").click();
            }
        </script>
        <form name = "prolis">
        <img src = "index.jpg" id = "image" onclick = "pro1()";>
        <input type = "file" id = "file">
    </body>
</html>

Note:

You just need to use document.getElementById("file") to access an element by its id.

Grapery answered 14/9, 2018 at 14:51 Comment(2)

And you can assign it back to the image once you fetch the file – Annoying 14/9, 2018 at 14:56

@Annoying Yes of course that's another thing. But I don't think, that's what he si looking for. – Huh 14/9, 2018 at 14:57

if you want to select element by id you should do it like this:

document.getElementById('element_id')

If you want to select form element you should do it like this:

document.form_name.element_id

Sarcocarp answered 14/9, 2018 at 14:47 Comment(0)

Create a click event for #file in your function

function pro1(e){
 e.preventDefault();
    document.getElementById('file')[0].click();
    });
  }

Atrium answered 14/9, 2018 at 14:55 Comment(0)

You can replace image automatically with newly selected image.

<div class="image-upload">
      <label for="file-input">
        <img id="previewImg" src="https://icon-library.net/images/upload-photo-icon/upload-photo-icon-21.jpg" style="width: 100px; height: 100px;" />
      </label>

      <input id="file-input" type="file" onchange="previewFile(this);" style="display: none;" />
    </div>

<script>
        function previewFile(input){
            var file = $("input[type=file]").get(0).files[0];

            if(file){
              var reader = new FileReader();

              reader.onload = function(){
                  $("#previewImg").attr("src", reader.result);
              }

              reader.readAsDataURL(file);
            }
        }
    </script>

Tarbes answered 30/11, 2020 at 20:35 Comment(0)

Recommended topics

Hot tags