Replace Input Type=File by an Image

How to make image to behave like file input?

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>

custom input type file, and replace the input type with selected image using jquery

You can try use jQuery for this. I made an example below.

The code to make the preview is this:

function readURL(input) {
  var id = $(input).attr("id");

  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      $('label[for="' + id + '"] .upload-icon').css("border", "none");
      $('label[for="' + id + '"] .icon').hide();
      $('label[for="' + id + '"] .prev').attr('src', e.target.result).show();
    }

    reader.readAsDataURL(input.files[0]);
  }
}

$("input[id^='file-input']").change(function() {
  readURL(this);
});

I've made it more dynamic so you can use the input field multiple times, as in your example image.

Hope it helps you.

function readURL(input) {  var id = $(input).attr("id");
  if (input.files && input.files[0]) {    var reader = new FileReader();
    reader.onload = function(e) {      $('label[for="' + id + '"] .upload-icon').css("border", "none");      $('label[for="' + id + '"] .icon').hide();      $('label[for="' + id + '"] .prev').attr('src', e.target.result).show();    }
    reader.readAsDataURL(input.files[0]);  }}
$("input[id^='file-input']").change(function() {  readURL(this);});

.image-upload>input {  display: none;}
.upload-icon {  width: 100px;  height: 97px;  border: 2px solid #5642BE;  border-style: dotted;  border-radius: 18px;  float: left;}
.upload-icon .icon {  width: 60px;  height: 60px;  margin: 19px;  cursor: pointer;}
.prev {  display: none;  width: 95px;  height: 92px;  margin: 2px;  border-radius: 15px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><form>  <div class="image-upload">    <label for="file-input">           <div class="upload-icon">            <img class="icon" src="https://image.flaticon.com/icons/png/128/61/61112.png">            <img class="prev" src="https://image.flaticon.com/icons/png/128/61/61112.png">            </div>          </label>    <input id="file-input" type="file" />  </div>  <div class="image-upload">    <label for="file-input2">           <div class="upload-icon">            <img class="icon" src="https://image.flaticon.com/icons/png/128/61/61112.png">            <img class="prev" src="https://image.flaticon.com/icons/png/128/61/61112.png">            </div>          </label>    <input id="file-input2" type="file" />  </div>  <div class="image-upload">    <label for="file-input3">           <div class="upload-icon">            <img class="icon" src="https://image.flaticon.com/icons/png/128/61/61112.png">            <img class="prev" src="https://image.flaticon.com/icons/png/128/61/61112.png">            </div>          </label>    <input id="file-input3" type="file" />  </div></form>

Replace CHOOSE FILE with an image

I think you can cheat and position an image over the input, then add a click handler to the image and pass it through to the input button below.

Is this what you are trying to achieve?

const input = document.querySelector("#avatar");const button = document.querySelector("#button");
button.addEventListener('click', event => input.click(event));

.body {  font-family: sans-serif;}
label {  display: inline-block;  padding: 1em 0;}
.wrapper {  position: relative;}
#avatar {  display: block;  height: 50px;  border: 1px solid #333;}
#button {  position: absolute;  left: 1px;  top: 1px;}

<div class="body">  <label for="avatar">Choose a profile picture:</label>  <div class="wrapper">    <input type="file" id="avatar" name="avatar">    <img id="button" src="https://via.placeholder.com/75x50/333333/ffffff?text=Avatar"></img>  </div></div>

Replace input file with my own button in the form

You'll achieve this with couple of lines of CSS. Fiddle

input[type="file"] {    display: none;}.custom-file-upload {    border: 1px solid #ccc;    display: inline-block;    padding: 6px 12px;    cursor: pointer;}

<label for="file-upload" class="custom-file-upload">    <i class="fa fa-cloud-upload"></i> Custom Upload</label><input id="file-upload" type="file"/>

How to replace a file input's content by the result of canvas.toDataURL?

It seems we cannot modify the <input type="file">, but we can add the data to another text field (as advised by @PatrickEvans) or an <input type="hidden">:

function doit() {    var file = document.getElementById('file').files[0],        canvas = document.getElementById('canvas'),        hidden = document.getElementById('hidden'),        ctx = canvas.getContext("2d"),        img = document.createElement("img"),        reader = new FileReader();          reader.onload = function(e) {         img.src = e.target.result;    }        img.onload = function () {         ctx.drawImage(img, 0, 0);        hidden.value = canvas.toDataURL("image/jpeg", 0.5);    }    reader.readAsDataURL(file);}

<input type="file" onchange="doit();" id="file" />
<form action="/upload" method="post"><input type="hidden" id="hidden" /><input type="submit" /></form>
<canvas id="canvas" style="display: none" />

How to replace image (icon) insted of input type file with same action in text area?

To add an icon in the textarea, insert the <img> tag for the icon after the <textarea>, then add the following to the CSS:

.icon-class {
    position: absolute;
    top: 0;
    left: 0;
}

Change input with type file to an icon - how can I delete path preview and change styling? React, JS

<label htmlFor="file-upload" className="file-upload">
                    <div className="fileUploadButton">
                      <FontAwesomeIcon
                        className="awesomeAboutPhoto"
                        icon={faEdit}
                        color="aliceblue"
                      />
                      <input
                        id="file-upload"
                        type="file"
                        accept="image/x-png, image/jpeg"
                        onChange={handleAddPhoto}
                      />
                    </div>
                  </label>

Thats how I dealt with input file looking like a button, since labeling it as an actual button did not seem to work. So you should use Css to make div look like button.
And second part of your question I can't really understand what you want, perhaps share some code or example of what you want.